wsemi
Version:
A support package for web developer.
193 lines (137 loc) • 13.7 kB
Markdown
# wsemi
A support package for web developer.

[](https://npmjs.org/package/wsemi)
[](https://npmjs.org/package/wsemi)
[](https://github.com/yuda-lyu/wsemi)
[](https://npmjs.org/package/wsemi)
[](https://www.jsdelivr.com/package/npm/wsemi)
## Documentation
To view documentation or get support, visit [docs](https://yuda-lyu.github.io/wsemi/wsemi.html).
## Example
To view some examples for more understanding, visit examples:
> **lodash:** [ex-lodash.html](https://yuda-lyu.github.io/wsemi/examples/ex-lodash.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-lodash.html)]
> **cryptojs:** [ex-cryptojs.html](https://yuda-lyu.github.io/wsemi/examples/ex-cryptojs.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-cryptojs.html)]
> **dayjs:** [ex-dayjs.html](https://yuda-lyu.github.io/wsemi/examples/ex-dayjs.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-dayjs.html)]
> **dayjs:** [ex-timeTZ2expire-timeTZ2past.html](https://yuda-lyu.github.io/wsemi/examples/ex-timeTZ2expire-timeTZ2past.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-timeTZ2expire-timeTZ2past.html)]
> **colorConverter:** [ex-colorConverter.html](https://yuda-lyu.github.io/wsemi/examples/ex-colorConverter.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-colorConverter.html)]
> **blob2b64:** [ex-blob2b64.html](https://yuda-lyu.github.io/wsemi/examples/ex-blob2b64.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-blob2b64.html)]
> **domTooltip[with popper.js]:** [ex-domTooltip.html](https://yuda-lyu.github.io/wsemi/examples/ex-domTooltip.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domTooltip.html)]
> **domShowImages:** [ex-domShowImages.html](https://yuda-lyu.github.io/wsemi/examples/ex-domShowImages.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domShowImages.html)]
> **domShowImagesDyn[dynamic import]:** [ex-domShowImagesDyn.html](https://yuda-lyu.github.io/wsemi/examples/ex-domShowImagesDyn.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domShowImagesDyn.html)]
> **domConvertToPic:** [ex-domConvertToPic.html](https://yuda-lyu.github.io/wsemi/examples/ex-domConvertToPic.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domConvertToPic.html)]
> **domConvertToPicDyn[dynamic import]:** [ex-domConvertToPicDyn.html](https://yuda-lyu.github.io/wsemi/examples/ex-domConvertToPicDyn.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domConvertToPicDyn.html)]
> **domRenderMarkdownMind:** [ex-domRenderMarkdownMind.html](https://yuda-lyu.github.io/wsemi/examples/ex-domRenderMarkdownMind.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domRenderMarkdownMind.html)]
> **domRenderMarkdownMindDyn[dynamic import]:** [ex-domRenderMarkdownMindDyn.html](https://yuda-lyu.github.io/wsemi/examples/ex-domRenderMarkdownMindDyn.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domRenderMarkdownMindDyn.html)]
> **domCompareText:** [ex-domCompareText.html](https://yuda-lyu.github.io/wsemi/examples/ex-domCompareText.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domCompareText.html)]
> **domCompareTextDyn[dynamic import]:** [ex-domCompareTextDyn.html](https://yuda-lyu.github.io/wsemi/examples/ex-domCompareTextDyn.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domCompareTextDyn.html)]
> **domScrollIntoView:** [ex-domScrollIntoView.html](https://yuda-lyu.github.io/wsemi/examples/ex-domScrollIntoView.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domScrollIntoView.html)]
> **domScrollTo:** [ex-domScrollTo.html](https://yuda-lyu.github.io/wsemi/examples/ex-domScrollTo.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domScrollTo.html)]
> **domShowInputAndGetFiles:** [ex-domShowInputAndGetFiles.html](https://yuda-lyu.github.io/wsemi/examples/ex-domShowInputAndGetFiles.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domShowInputAndGetFiles.html)]
> **domDropFiles:** [ex-domDropFiles.html](https://yuda-lyu.github.io/wsemi/examples/ex-domDropFiles.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domDropFiles.html)]
> **domDrag:** [ex-domDrag.html](https://yuda-lyu.github.io/wsemi/examples/ex-domDrag.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domDrag.html)]
> **domIsVisible:** [ex-domIsVisible.html](https://yuda-lyu.github.io/wsemi/examples/ex-domIsVisible.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domIsVisible.html)]
> **domRipple:** [ex-domRipple.html](https://yuda-lyu.github.io/wsemi/examples/ex-domRipple.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-domRipple.html)]
> **strFindFuzz:** [ex-strFindFuzz.html](https://yuda-lyu.github.io/wsemi/examples/ex-strFindFuzz.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-strFindFuzz.html)]
> **strFindFuzzDyn[dynamic import]:** [ex-strFindFuzzDyn.html](https://yuda-lyu.github.io/wsemi/examples/ex-strFindFuzzDyn.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-strFindFuzzDyn.html)]
> **obj2u8arr & u8arr2obj:** [ex-obj2u8arr-u8arr2obj.html](https://yuda-lyu.github.io/wsemi/examples/ex-obj2u8arr-u8arr2obj.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-obj2u8arr-u8arr2obj.html)]
> **getUserAgent:** [ex-getUserAgent.html](https://yuda-lyu.github.io/wsemi/examples/ex-getUserAgent.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-getUserAgent.html)]
> **getUserAgentDyn[dynamic import]:** [ex-getUserAgentDyn.html](https://yuda-lyu.github.io/wsemi/examples/ex-getUserAgentDyn.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-getUserAgentDyn.html)]
> **xss:** [ex-clearXSS.html](https://yuda-lyu.github.io/wsemi/examples/ex-clearXSS.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-clearXSS.html)]
> **openlink:** [ex-openLink.html](https://yuda-lyu.github.io/wsemi/examples/ex-openLink.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-openLink.html)]
> **xlsx:** [ex-xlsx.html](https://yuda-lyu.github.io/wsemi/examples/ex-xlsx.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-xlsx.html)]
> **xlsx[dynamic import]:** [ex-xlsxDyn](https://yuda-lyu.github.io/wsemi/examples/ex-xlsxDyn) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-xlsxDyn)]
> **html2pic:** [ex-html2pic.html](https://yuda-lyu.github.io/wsemi/examples/ex-html2pic.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-html2pic.html)]
> **html2picDyn[dynamic import]:** [ex-html2picDyn.html](https://yuda-lyu.github.io/wsemi/examples/ex-html2picDyn.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-html2picDyn.html)]
> **html2str:** [ex-html2str.html](https://yuda-lyu.github.io/wsemi/examples/ex-html2str.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-html2str.html)]
> **html2strDyn[dynamic import]:** [ex-html2strDyn.html](https://yuda-lyu.github.io/wsemi/examples/ex-html2strDyn.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-html2strDyn.html)]
> **ocr:** [ex-ocr.html](https://yuda-lyu.github.io/wsemi/examples/ex-ocr.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-ocr.html)]
> **ocrDyn[dynamic import]:** [ex-ocrDyn.html](https://yuda-lyu.github.io/wsemi/examples/ex-ocrDyn.html) [[source code](https://github.com/yuda-lyu/wsemi/blob/master/docs/examples/ex-ocrDyn.html)]
## Installation
### Using npm(ES6 module):
> **Note:** wsemi is mainly dependent on `lodash`, `eventemitter3`, `crypto-js`, `dayjs`, `diff`, `fuse.js`, `decimal.js`,`ua-parser-js`, `xss`, `xlsx`, `tesseract.js`, `htmlparser` and `tippy.js`.
```alias
npm i wsemi
```
### In a browser(UMD module):
> **Note:** umd file includes with `lodash`, `crypto-js` and `tippy.js`.
[Optional] Add script with nomodule for IE11.
```alias
<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
```
[Optional] Add script for `dayjs`(or `moment`).
> **Note:** Include script when using some function of time. If include `moment`, need set `moment` to `window.dayjs` (ex: `window.dayjs = moment`), and put it before include script for wsemi.umd.js.
```alias
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.7/dayjs.min.js"></script>
```
or
```alias
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script>
window.dayjs = moment
</script>
```
[Optional] Add script for `fuse.js`.
> **Note:** Include script when using `strFindFuzz` function, and don't include script when using `strFindFuzzDyn` function.
```alias
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"></script>
```
[Optional] Add script for `ua-parser-js`.
> **Note:** Include script when using `getUserAgent` function, and don't include script when using `getUserAgentDyn` function.
```alias
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@1.0.34/dist/ua-parser.min.js"></script>
```
[Optional] Add script for `xss`.
> **Note:** Include script when using `clearXSS` function.
```alias
<script src="https://cdn.jsdelivr.net/npm/xss@1.0.14/dist/xss.min.js"></script>
```
[Optional] Add script for `xlsx`.
> **Note:** Include script when using `downloadExcelFileFromData` or `getDataFromExcelFileU8Arr` function, and don't include script when using `downloadExcelFileFromDataDyn` or `getDataFromExcelFileU8ArrDyn` function.
```alias
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
```
[Optional] Add link and script for `viewerjs`.
> **Note:** Include script when using `domShowImages` function, and don't include script when using `domShowImagesDyn` function.
```alias
<link href="https://cdn.jsdelivr.net/npm/viewerjs@1.11.3/dist/viewer.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/viewerjs@1.11.3/dist/viewer.min.js"></script>
```
[Optional] Add script for `html2canvas`.
> **Note:** Include script when using `html2pic` function, and don't include script when using `html2picDyn` function. Use canvg with nomodule for IE11.
```alias
<script nomodule src="https://cdn.jsdelivr.net/npm/canvg@4.0.0/lib/umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
```
[Optional] Add script for `html-to-image`. It does not support IE11.
> **Note:** Include script when using `domConvertToPic` function, and don't include script when using `domConvertToPicDyn` function. html-to-image does not support IE11 and Safari.
```alias
<script src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js"></script>
```
[Optional] Add script for `markmap`. It does not support IE11.
> **Note:** Include script when using `domRenderMarkdownMind` function, and don't include script when using `domRenderMarkdownMindDyn` function. markmap does not support IE11 and Safari.
```alias
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.3/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view@0.14.4/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.14.4/dist/browser/index.min.js"></script>
```
[Optional] Add link and script for `diff2html`. It does not support IE11.
> **Note:** Include script when using `domCompareText` function, and don't include script when using `domCompareTextDyn` function.
```alias
<link href="https://cdn.jsdelivr.net/npm/diff2html@3.4.34/bundles/css/diff2html.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.34/bundles/js/diff2html.min.js"></script>
```
[Optional] Add script for `htmlparser`.
> **Note:** Include script when using `html2str` function, and don't include script when using `html2strDyn` function.
```alias
<script src="https://cdn.jsdelivr.net/npm/htmlparser@1.7.7/lib/htmlparser.min.js"></script>
```
[Optional] Add script for `tesseract.js`. It does not support IE11.
> **Note:** Include script when using `ocr` function, and don't include script when using `ocrDyn` function.
```alias
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.0.3/dist/tesseract.min.js"></script>
```
[Necessary] Add script for wsemi.
```alias
<script src="https://cdn.jsdelivr.net/npm/wsemi@1.7.19/dist/wsemi.umd.js"></script>
```