vue通過url方式展示PDF的幾種方法

更新時(shí)間：2023年01月17日 09:42:57 作者：今天的磚格外燙手.

小編最近接手的項(xiàng)目中有個(gè)需求,前端顯示后端返回的PDF格式的文件,下面這篇文章主要給大家介紹了關(guān)于vue通過url方式展示PDF的幾種方法,需要的朋友可以參考下

1.使用pdfjs-dist 插件，通過iframe標(biāo)簽顯示

首先 npm install pdfjs-dist --save

npm直接下載插件 npm install --save pdfjs-dist@2.0.943，@2.0.943這是指定版本號(hào)，不需要指定版本的就不需要帶，下載后在使用的頁(yè)面直接引入。

然后直接設(shè)置pdf路徑就可以直接展示，downloadUrl 是插件中的viewer.html地址，resFile是文件下載地址，到此就能正常預(yù)覽PDF，組件功能也很多，如需要額外的功能也可以在viewer.js自行修改

2.使用vue-pdf插件

執(zhí)行下面命令下載插件（vue-pdf是基于pdfjs-dist），并修改pacakge.json文件

????????npm i pdfjs-dist@2.5.207 --save
????????npm i vue-pdf@4.2.0 --save

????????"dependencies": {
? ????????????????"pdfjs-dist": "2.5.207",
? ????????????????"vue-pdf": "4.2.0",
????????? }

在使用的頁(yè)面中直接引入插件，標(biāo)簽為<pdf>就可以，路徑賦值同第一種方法

3.第三種方法使用了pdfjs-dist插件，通過url實(shí)現(xiàn)PDF轉(zhuǎn)圖片顯示

引入需要的插件pdfjs-dist，workerSrc(具體功能可以百度，沒搞明白)

本地文件URL:

通過URL轉(zhuǎn)換blob類型，然后轉(zhuǎn)為base64,這塊可以直接拿去用，getDay()方法可以換成自己想要的文件名，這個(gè)方法轉(zhuǎn)成base64后是包含前面類型的，又處理了一下，看個(gè)人需求

fileLinkToStreamDownload(url) {
      let fileName = this.getDay()
      let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/
      if (!reg.test(url)) {
        throw new Error('傳入?yún)?shù)不合法,不是標(biāo)準(zhǔn)的文件鏈接')
      } else {
        let xhr = new XMLHttpRequest()
        xhr.open('get', url, true)
        xhr.setRequestHeader('Content-Type', `application/pdf;charset-UTF-8`)
        xhr.responseType = 'blob'
        let that =this
        xhr.onload = function() {
          if (this.status == 200) {
            //接受二進(jìn)制文件流
            var blob = this.response
            // that.downloadExportFile(blob, fileName);
            that.blobToBase64(blob).then(res => {
                // blob轉(zhuǎn)base64
                let baseArr = res.split(',');
                that.showPdf(baseArr[1]);
              })
          }
        }
        xhr.send()
      }
    },
     //Blob類型轉(zhuǎn)BASE64
      blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        // readAsDataURL
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error('blobToBase64 error'));
        };
      });
    },
    getDay() {
      let time = new Date(),
      year = time.getFullYear(),
      month = time.getMonth() + 1,
      day = time.getDate(),
      timeStem = time.getTime()
      return `${year}/${month}/${day}/${timeStem}.pdf`
    },

拿到base64后，開始轉(zhuǎn)圖片處理：這個(gè)原理這里不多說了，也是照搬的，如果PDFJS.getDocument()獲取不到pdf對(duì)象，可以考慮一下版本問題（@2.2.228親測(cè)好用）

async showPdf(base64Val) {
      let pdfList = document.querySelector('.pdfList') //通過querySelector選擇DOM節(jié)點(diǎn),使用document.getElementById()也一樣
      let base64 = base64Val //獲得bas464編碼
      let decodedBase64 = window.atob(base64) //使用瀏覽器自帶的方法解碼
      let pdfCurrent = await PDFJS.getDocument({data: decodedBase64}) //返回一個(gè)pdf對(duì)象
      let pages = pdfCurrent.numPages //聲明一個(gè)pages變量等于當(dāng)前pdf文件的頁(yè)數(shù)
      for (let i = 1; i <= pages; i++) { //循環(huán)頁(yè)數(shù)
        let canvas = document.createElement('canvas') 
        let page = await pdfCurrent.getPage(i) //調(diào)用getPage方法傳入當(dāng)前循環(huán)的頁(yè)數(shù),返回一個(gè)page對(duì)象
        let scale = 1;//縮放倍數(shù)，1表示原始大小
        let viewport = page.getViewport(scale); 
        let context = canvas.getContext('2d'); //創(chuàng)建繪制canvas的對(duì)象
        canvas.height = viewport.height; //定義canvas高和寬
        canvas.width = viewport.width;
        let renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        await page.render(renderContext)
        canvas.className = 'canvas' //給canvas節(jié)點(diǎn)定義一個(gè)class名,這里我取名為canvas
        pdfList.appendChild(canvas) //插入到pdfList節(jié)點(diǎn)的最后
      }
    },

通過這個(gè)方法親測(cè)可以成功轉(zhuǎn)圖片，但是依舊沒解決圖片亂碼問題