devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端常用第三方库_vue常用的第三方组件库

作者：小蓝xlanll | 2024-05-25 03:17:52

赞

踩

vue常用的第三方组件库

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

一、下载

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

（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);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

（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);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

2、第三方插件

（1） FileSaver.js

（2） StreamSaver.js

二、图片查看器

1、viewerjs

2、v-viewer

三、富文本编辑器

1、 wangeditor

四、基于vue的table配置组件

1、 vxe-table

五、基于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

七、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
案例说明：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/

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/620335
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号