前端常用第三方库

Litt_White

已于 2024-02-28 09:20:18 修改

阅读量2.2k

点赞数 1

分类专栏： Vue 文章标签：前端

于 2022-12-12 15:55:02 首次发布

本文链接：https://blog.csdn.net/Litt_White/article/details/126288218

版权

Vue 专栏收录该内容

47 篇文章 3 订阅

订阅专栏

常用功能的第三方插件集合

一、下载
- 1、原生
- 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（全面）`
- 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、区别
十三、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`
- 2、`watermarkjs`
二十二、进度条
- 1、`progressbar.js`
二十三、Vue 大屏数据展示组件库
- 1、`DataV`
二十四、视频播放插件
- 1、`vue-video-player`
二十五、打印插件
- 1、`Print.js`
- 2、`vue-print-nb`
二十六、pdf嵌入
- 1、`PDFObject `
二十七、支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合
- 1、`vue-office`
二十八、docx转html
- 1、`mammoth.js`
二十九、tailwindcss
- 1、`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