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

實際上就是創(chuàng)建了一個a標簽，調(diào)用了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'); // 創(chuàng)建元素
        const blob = new Blob([res.data], {
          type: 'application/pdf;charset-UTF-8'
        });
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob); // 創(chuàng)建下載的鏈接
        // 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格式轉(zhuǎn)化下

// base64轉(zhuǎn)文件
    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 {
                // 轉(zhuǎn)換完成，創(chuàng)建一個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);
              }
            };
          }
        }
      });