vue如何下载本地pdf文件

 更新时间:2024年04月26日 09:54:58   作者:bangbang给你两锤  
这篇文章主要介绍了vue如何下载本地pdf文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue下载本地pdf文件

在vue中使用axios可以进行下载

axios('/public/pdf/***.pdf', {//pdf的位置
            responseType: 'blob', //重要代码
        }).then(res => {
            const url = window.URL.createObjectURL(new Blob([res.data]));
            const link = document.createElement('a');
            link.href = url;
            let fileName = "下载的pdf.pdf" //保存到本地的文件名称
            link.setAttribute('download', fileName);
            document.body.appendChild(link);
            link.click();
            console.log(link);
            link.remove();
        })

实际上就是创建了一个a标签,调用了download 

<a href="/***.pdf" rel="external nofollow"  download="下载pdf.pdf">点击下载</a>

放在html里面也可以下载,但是会遇到跨域问题,我是测试用的anywhere进行测试的,也可以用nginx解决跨域,JSONP,ajax,postMessage等等都可以解决跨域问题

vue PDF下载与预览(文件流格式和base64格式)

1、pdf下载(文件流格式)

    downClick(row) {
      console.log(row, 'pppppxxx');
      downLoadZDPdf({
        custId: '91140403MA7Y5MCH34',
        qrdType: '6'
      }).then(res => {
        const link = document.createElement('a'); // 创建元素
        const blob = new Blob([res.data], {
          type: 'application/pdf;charset-UTF-8'
        });
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob); // 创建下载的链接
        // num++
        link.setAttribute('download', row.stmtTp + '.pdf'); // 给下载后的文件命名
        document.body.appendChild(link);
        link.click(); // 点击下载
        document.body.removeChild(link); //  下载完成移除元素
        window.URL.revokeObjectURL(link.href); // 释放掉blob对象
      });
    },

2、pdf新开窗口预览

 preview(row) {
      getZDDataOfYL({
        custId: '91140403MA7Y5MCH34',
        qrdType: '6'
      }).then(res => {
        console.log(res, '预览=>>>>>>>>>>>>>');
        const blob = new Blob([res.data], { type: 'application/pdf' });
        this.pdfSrc = window.URL.createObjectURL(blob);
        window.open(this.pdfSrc);// 新窗口打开,借用浏览器去打印
      });
    },

3、base64格式

需将base64格式转化下

// base64转文件
    dataURLtoBlob(baseData) {
      var bstr = atob(baseData);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      this.transData = new Blob([u8arr], { type: `application/pdf;charset-UTF-	8;application/vnd.ms-excel` });
    },
    
getPDFDataOfYL({ fileId: item.DOC }).then(res => {
        this.loading = false;
        if (res.data.data) {
          // 预览
          if (flag !== 'DOWN') {
            this.basePdf = res?.data?.data;
            const basedata = res.data.data;
            this.pdfContent = 'data:application/pdf;base64,' + basedata;
            this.src = pdf.createLoadingTask({ url: this.pdfContent, CMapReaderFactory });
            this.src.promise.then(pdf => {
              this.numPages = pdf.numPages;
            });
          } else { // 下载
            this.dataURLtoBlob(res?.data?.data);
            var reader = new FileReader();
            reader.readAsDataURL(this.transData);

            reader.onload = function (e) {
              // 兼容IE
              if (window.navigator.msSaveOrOpenBlob) {
                var bstr = atob(e.target.result.split(',')[1]);
                var n = bstr.length;
                var u8arr = new Uint8Array(n);
                while (n--) {
                  u8arr[n] = bstr.charCodeAt(n);
                }
                var blob = new Blob([u8arr]);
                window.navigator.msSaveOrOpenBlob(blob, item.DOCNAME);
              } else {
                // 转换完成,创建一个a标签用于下载
                const a = document.createElement('a');
                a.download = item.DOCNAME; // 这里写你的文件名
                a.href = e.target.result;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
              }
            };
          }
        }
      });

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue原理Compile从新建实例到结束流程源码

    vue原理Compile从新建实例到结束流程源码

    这篇文章主要为大家介绍了vue原理Compile从新建实例到结束流程源码,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue echarts绘制甘特图的示例代码

    Vue echarts绘制甘特图的示例代码

    甘特图是一种条状图,直观展示项目进展随时间的走势及联系,其中,项目时间由横轴表示,项目活动由纵轴表示,本文给大家介绍了Vue echarts绘制甘特图的实现方法,并有详细的代码示例供大家参考,需要的朋友可以参考下
    2024-03-03
  • Vue中多元素过渡特效的解决方案

    Vue中多元素过渡特效的解决方案

    本文将详细介绍通过Vue使多元素进行过渡动画,需要的朋友可以参考下
    2020-02-02
  • Vue项目每次发版后要清理浏览器缓存问题解决办法

    Vue项目每次发版后要清理浏览器缓存问题解决办法

    最近项目更新频繁,每次一更新客户都说还跟之前的一样,一查原因是因为客户没有清空浏览器的缓存,所以为了方便客户看到最新版本,开始调研再发布新版本后自动清理缓存,这篇文章主要给大家介绍了关于Vue项目每次发版后要清理浏览器缓存问题的解决办法,需要的朋友可以参考下
    2024-02-02
  • Vue使用axios(Ajax)+ElementUI实现登录实践

    Vue使用axios(Ajax)+ElementUI实现登录实践

    本文介绍了如何使用Vue和ElementUI框架创建一个登录页面,并实现前后端交互,同时,还讨论了跨域问题的解决方案以及ES6中的箭头函数
    2026-03-03
  • Vue3使用icon的两种方式实例

    Vue3使用icon的两种方式实例

    vue开发网站的时候,往往图标是起着很重要的作用,下面这篇文章主要给大家介绍了关于Vue3使用icon的两种方式,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-11-11
  • vue如何判断dom的class

    vue如何判断dom的class

    这篇文章主要介绍了vue如何判断dom的class,vue点击给dom添加class然后获取含有class的dom文件,具体内容详情大家参考下本文
    2018-04-04
  • vue+element实现表格新增、编辑、删除功能

    vue+element实现表格新增、编辑、删除功能

    这篇文章主要为大家详细介绍了vue+element实现表格新增、编辑、删除功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue3+ts项目之安装eslint、prettier和sass的详细过程

    vue3+ts项目之安装eslint、prettier和sass的详细过程

    这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码,需要的朋友可以参考下
    2023-10-10
  • vue中组件样式冲突的问题解决

    vue中组件样式冲突的问题解决

    默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成组件之间的样式冲突问题,本文就来介绍一下如何解决此问题,感兴趣的可以了解一下
    2023-12-12

最新评论