常用功能的第三方插件集合
- 一、下载
- 二、图片查看器
- 三、富文本编辑器
- 四、基于vue的table配置组件
- 五、基于vue的form表单设计器
- 六、基于vue的表单验证库
- 七、Vue驱动的静态网站生成器
- 八、博客
- 九、基于模板生成word,html并导出等
- 十、纯前端类似excel的在线表格
- 十一、在线绘图工具
- 十二、可视化工具
- 十三、List列表拖拽组件
- 十四、Vue2可拖动和可调整大小元素的组件
- 十五、二维码
- 十六、文字滚动
- 十七、将画布保存或转换为图像的工具
- 十八、图片编辑工具
- 十九、基于 canvas 快速绘制结构化 UI 、动画和交互效果
- 二十、使用HTML5画布从DOM节点生成图像
- 二十、电子签名
- 二十一、水印
- 二十二、进度条
- 二十三、Vue 大屏数据展示组件库
- 二十四、视频播放插件
- 二十五、打印插件
- 二十六、pdf嵌入
- 二十七、支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合
- 二十八、docx转html
- 二十九、tailwindcss
一、下载
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
- 说明:text、URL、图片、excel文件(需搭配js-xlsx)下载
- 地址:https://github.com/eligrey/FileSaver.js
- 使用:https://blog.csdn.net/z858466/article/details/113681807
(2) StreamSaver.js
- 说明:保存较大的文件,不受 blob 的大小限制或内存限制
- 地址:https://github.com/jimmywarting/StreamSaver.js
二、图片查看器
1、viewerjs
- 说明:vue的图片查看器组件,支持旋转、缩放、缩略图等
- 地址:https://github.com/fengyuanchen/viewerjs
2、v-viewer
- 说明:vue的图片查看器组件,支持旋转、缩放、缩略图、轮播等,基于viewer.js
- 地址:https://github.com/mirari/v-viewer
三、富文本编辑器
1、 wangeditor
- 说明:在线编辑器,类似于word在线编辑
- 地址:https://www.wangeditor.com/v5/getting-started.html
四、基于vue的table配置组件
1、 vxe-table
- 说明:已经封装好的table表格,还带有form表单的封装
- 地址:https://vxetable.cn/#/table/base/scrollStyle
五、基于vue的form表单设计器
1、 form-generator(简单)
- 说明:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。
- 地址:https://github.com/JakHuang/form-generator
- UI支持:Element UI
- Vue支持:Vue2
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
- 地址:https://blog.csdn.net/baiqiangdoudou/article/details/100184581
- github地址:https://github.com/logaretm/vee-validate
七、Vue驱动的静态网站生成器
1、 vuepress
八、博客
1、 blog-vue-typescript
1、 blog-vue-springboot
九、基于模板生成word,html并导出等
1、docxtemplater
- 地址:https://docxtemplater.com/demo/
- 语法可以直接搜一下看看就行
十、纯前端类似excel的在线表格
1、Luckysheet
- 地址:https://gitee.com/mengshukeji/Luckysheet?_from=gitee_search
- 官网:https://dream-num.github.io/LuckysheetDocs/zh/guide/resource.html#博客
2、X-Spreadsheet
- 地址:https://github.com/myliang/x-spreadsheet
- 官网:https://hondrytravis.com/x-spreadsheet-doc/guide/#绑定事件
十一、在线绘图工具
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
- JS版本:https://github.com/nhn/tui.image-editor
- Vue版本:https://github.com/nhn/tui.image-editor/tree/master/apps/vue-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
案例说明:https://blog.csdn.net/m0_49714202/article/details/125312364
二十五、打印插件
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/