一、下载
1、原生
（1）a标签，只能同源下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<!-- a 标签下载 -->
<a href="/04-a标签下载功能/test.png" download="demo">下载</a>
<!-- 其他标签实现下载 同域 -->
<div onclick="download()">下载</div>
<!-- 其他标签实现下载 跨域 -->
<div onclick="download1()">下载</div>
</div>
<script>
// 同域
function download(
url = '/04-a标签下载功能/test.png',
title = 'demo2',
artist = 'down'
) {
const eleLink = document.createElement('a') // 新建A标签
eleLink.href = url || '/04-a标签下载功能/test.png' // 下载的路径
eleLink.download = `${title} - ${artist}` // 设置下载的属性，可以为空
eleLink.style.display = 'none'
document.body.appendChild(eleLink)
eleLink.click() // 触发点击事件
document.body.removeChild(eleLink)
}
// 跨域
function download1(
url = 'https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
title = 'demo3',
artist = 'down'
) {
var x = new XMLHttpRequest()
x.open('GET', url, true)
x.responseType = 'blob'
x.onload = function () {
const url = window.URL.createObjectURL(x.response)
const eleLink = document.createElement('a')
eleLink.href = url
eleLink.download = `${title} - ${artist}`
eleLink.style.display = 'none'
document.body.appendChild(eleLink)
eleLink.click()
document.body.removeChild(eleLink)
}
x.send()
}
</script>
</body>
</html>
（2）iframe下载，支持跨域get请求
export function iframeDownload(url, defaultMime = 'application/octet-stream') {
//创建iframe标签
const f = document.createElement('iframe');
//下载url
f.src = url;
// 设置不可见
f.style.display = 'none';
// 挂到body中
document.body.appendChild(f);
// 延时 注销iframe标签
setTimeout(function () {
document.body.removeChild(f);
}, 333);
}
（3）Form表单下载，支持跨域get和post请求
export function downloadFileByForm(
url: string,
filename: string,
method = 'get'
) {
const form = document.createElement('form');
form.setAttribute('action', `${url}&bucketName=${config.bucketName}`);
form.setAttribute('method', `${method}`);
const input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'filename');
input.setAttribute('value', `${filename}`);
form.appendChild(input);
document.body.appendChild(form);
form.submit();
setTimeout(() => {
document.body.removeChild(form);
}, 100);
}
2、第三方插件
（1） FileSaver.js
（2） StreamSaver.js
二、图片查看器
1、viewerjs
2、v-viewer
三、富文本编辑器
1、 wangeditor
四、基于vue的table配置组件
1、 vxe-table
五、基于vue的form表单设计器
1、 form-generator（简单）
2、 form-create（全面）
- 说明：form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
- 地址：https://github.com/xaboy/form-create
- UI支持：iview、view-design、element-ui、ant-design-vue
- Vue支持：Vue2、Vue3
3、 vue-form-making
六、基于vue的表单验证库
1、 vee-validate
七、Vue驱动的静态网站生成器
1、 vuepress
八、博客
1、 blog-vue-typescript
1、 blog-vue-springboot
九、基于模板生成word，html并导出等
1、docxtemplater
十、纯前端类似excel的在线表格
1、Luckysheet
2、X-Spreadsheet
十一、在线绘图工具
1、excalidraw
十二、可视化工具
1、D3
2、Echarts
3、区别
- echarts基本上以现成的为主。
- d3.js 更自由些，但美观度和工作量都要自己把握。也麻烦点。
十三、List列表拖拽组件
1、Sortable
十四、Vue2可拖动和可调整大小元素的组件
1、vue-draggable-resizable
十五、二维码
1、qrcodejs2
十六、文字滚动
1、vue-seamless-scroll
十七、将画布保存或转换为图像的工具
1、Canvas2image
十八、图片编辑工具
1、tui.image-editor
十九、基于 canvas 快速绘制结构化 UI 、动画和交互效果
1、spritejs
二十、使用HTML5画布从DOM节点生成图像
1、dom-to-image
二十、电子签名
1、signature_pad
二十一、水印
1、watermark-dom
https://github.com/saucxs/watermark-dom
2、watermarkjs
https://github.com/brianium/watermarkjs
二十二、进度条
1、progressbar.js
https://github.com/kimmobrunfeldt/progressbar.js
二十三、Vue 大屏数据展示组件库
1、DataV
http://datav.jiaminghi.com/
二十四、视频播放插件
1、vue-video-player
一些API使用说明：https://blog.csdn.net/a772116804/article/details/123680790
二十五、打印插件
1、Print.js
https://github.com/crabbly/Print.js
2、vue-print-nb
二十六、pdf嵌入
1、PDFObject
https://github.com/pipwerks/PDFObject
二十七、支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合
1、vue-office
https://github.com/501351981/vue-office
二十八、docx转html
1、mammoth.js
https://github.com/mwilliamson/mammoth.js
二十九、tailwindcss
1、tailwindcss
https://www.tailwindcss.cn/
