一文詳解如何在vue中實(shí)現(xiàn)文件預(yù)覽功能

更新時(shí)間：2022年10月12日 11:04:28 作者：世界和平?????

很多Vue項(xiàng)目中都需要PDF文件預(yù)覽功能,比如合同ERP,銷售CRM,內(nèi)部文檔CMS管理系統(tǒng),內(nèi)置PDF文件在線預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于如何在vue中實(shí)現(xiàn)文件預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下

文件流

如何將各種文件的文件流(blob)轉(zhuǎn)化為線上可以直接預(yù)覽的數(shù)據(jù)，這里簡(jiǎn)單介紹四種不同類型的文件預(yù)覽。分別是pdf，docx，xlsx，jpg/png/jpeg等。有一個(gè)事情是需要重點(diǎn)注意的，文件流必須保證能夠被正常下載解析后才可以支持預(yù)覽，否則以下使用的各種插件都可能會(huì)產(chǎn)生報(bào)錯(cuò)。（需著重關(guān)注文件加解密后文件是否會(huì)出現(xiàn)損壞的問(wèn)題）

以下是從后端獲取到的文件流形式：

docx的預(yù)覽

通過(guò)借助插件docx-preview實(shí)現(xiàn)。

① 首先安裝該插件

npm install docx-preview

② 引入對(duì)應(yīng)包

import { renderAsync } from 'docx-preview';

③調(diào)用函數(shù)，解析docx文件

renderAsync(res.data, document.getElementById("preload_box"), null, {
   className: "docx", // 默認(rèn)和文檔樣式類的類名/前綴
   inWrapper: true, // 啟用圍繞文檔內(nèi)容渲染包裝器
   ignoreWidth: false, // 禁止頁(yè)面渲染寬度
   ignoreHeight: false, // 禁止頁(yè)面渲染高度
   ignoreFonts: false, // 禁止字體渲染
   breakPages: true, // 在分頁(yè)符上啟用分頁(yè)
   ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分頁(yè)
   experimental: false, //啟用實(shí)驗(yàn)性功能（制表符停止計(jì)算）
   trimXmlDeclaration: true, //如果為真，xml聲明將在解析之前從xml文檔中刪除
   debug: false, // 啟用額外的日志記錄
})

pdf的預(yù)覽

① 首先安裝該插件

npm install pdfjs-dist

② 引入對(duì)應(yīng)包

import * as PDFJS from "pdfjs-dist/legacy/build/pdf";  // 引入PDFJS 
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址

③調(diào)用函數(shù)，解析pdf文件

const blobPdf = new window.Blob([res.data], { type: 'application/pdf;chaset-UTF-8' })
const pdfhref = URL.createObjectURL(blobPdf);
PDFJS.getDocument(pdfhref).promise.then(pdfDoc=>{
   const numPages = pdfDoc.numPages; // pdf的總頁(yè)數(shù)
   // 獲取第1頁(yè)的數(shù)據(jù)
   pdfDoc.getPage(1).then(page =>{
      // 設(shè)置canvas相關(guān)的屬性
      const canvas = document.getElementById("pdf_canvas");
      const ctx = canvas.getContext("2d");
      const dpr = window.devicePixelRatio || 1;
      const bsr =
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1;
      const ratio = dpr / bsr;
      const viewport = page.getViewport({ scale: 1 });
      canvas.width = viewport.width * ratio;
      canvas.height = viewport.height * ratio;
      canvas.style.width = viewport.width + "px";
      canvas.style.height = viewport.height + "px";
      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
      const renderContext = {
      canvasContext: ctx,
      viewport: viewport,
   };
   // 數(shù)據(jù)渲染到canvas畫布上
   page.render(renderContext);
  })
})

關(guān)于pdf的解析這里有幾個(gè)問(wèn)題需要注意：

1.我們?yōu)榱苏_解析pdf，將pdf文件流轉(zhuǎn)化為一個(gè)blob的地址去被解析器讀取。

2.由于插件每次只能查詢pdf文件一頁(yè)數(shù)據(jù)，所以我們需要額外添加翻頁(yè)的邏輯代碼。

3.被pdf渲染的元素pdf_canvas必須是canvas標(biāo)簽。

以下為翻頁(yè)的代碼：

      // 切換pdf頁(yè)數(shù)
      function changePdfPage (type) {
        if (type == 'pre') {
          if (pdfPage.value <= 1) {
            ElMessage.error('沒有上一頁(yè)了');
            return 
          }
          pdfPage.value -= 1
        } else {
          if (pdfPage.value >= pdfValue.numPages) {
            ElMessage.error('沒有下一頁(yè)了');
            return 
          }
          pdfPage.value += 1
        }
        initPdfPage()
      }
      
      // 重新初始化pdf對(duì)應(yīng)頁(yè)數(shù)
      function initPdfPage () {
        pdfValue.getPage(pdfPage.value).then(page =>{
          // 設(shè)置canvas相關(guān)的屬性
          const canvas = document.getElementById("pdf_canvas");
          const ctx = canvas.getContext("2d");
          const dpr = window.devicePixelRatio || 1;
          const bsr =
            ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio ||
            1;
          const ratio = dpr / bsr;
          const viewport = page.getViewport({ scale: 1 });
          canvas.width = viewport.width * ratio;
          canvas.height = viewport.height * ratio;
          canvas.style.width = viewport.width + "px";
          canvas.style.height = viewport.height + "px";
          ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
          const renderContext = {
            canvasContext: ctx,
            viewport: viewport,
          };
          // 數(shù)據(jù)渲染到canvas畫布上
          page.render(renderContext);
        })
      }

xlsx預(yù)覽

① 首先安裝該插件

npm install xlsx

② 引入對(duì)應(yīng)包

import * as XLSX from 'xlsx/xlsx.mjs'

<div class="sheet_list">
   <p class="sheet_item" v-for="(item, index) in workbook.SheetNames" @click="getTable(item)">{{item}}</p>
</div>
<el-table :data="excelData" style="width: 100%">
   <el-table-column
     v-for="(value, key, index) in excelData[0]"
     :key="index"
     :prop="key"
     :label="key"
   ></el-table-column>
</el-table>

 const xlsx_data = await res.data.arrayBuffer()
 let tem_workbook = XLSX.read(xlsx_data, {type:"array"}); // 解析數(shù)據(jù)
 workbook.value = tem_workbook
 getTable(tem_workbook.SheetNames[0]); // 讀取第一張表數(shù)據(jù)
 
 // 解析xlsx數(shù)據(jù)為table
 function getTable(sheetName) {
    let worksheet = workbook.value.Sheets[sheetName];
    excelData.value = XLSX.utils.sheet_to_json(worksheet);
 }

xlsx插件僅僅是幫我們解析excel表的數(shù)據(jù)，并沒有幫我們排版，所以通常我們需要自己寫樣式重新排列數(shù)據(jù)，用element的table組件是個(gè)不錯(cuò)的選擇。

同時(shí)為了可以切換多個(gè)表，我們還可以將表名數(shù)組作一個(gè)遍歷，提供給用戶切換表的功能。

圖片的預(yù)覽

圖片的預(yù)覽相對(duì)而言簡(jiǎn)單了許多，不需要利用任何插件，僅僅只需要將圖片文件流轉(zhuǎn)換為一個(gè)可以被查閱的blob地址。

const blobImage = new window.Blob([res.data], { type: 'image/' + fileType }) // fileType指圖片的類型
const imageHref = URL.createObjectURL(blobImage); // 創(chuàng)造一個(gè)地址
preloadImg.value = imageHref // img標(biāo)簽的src屬性的值

結(jié)語(yǔ)

以上就是相關(guān)一些文件的預(yù)覽方式，所利用到的插件并非是單一的選擇，還有其他的解決方案可以達(dá)到我們的目的。但是需要切記的事情是大部分插件都需要我們保證文件的完整性，才能夠解析成功，在完成該功能的時(shí)候我們需要先關(guān)注文件上傳和下載的時(shí)候有沒有丟失或者損壞這個(gè)前提。

到此這篇關(guān)于如何在vue中實(shí)現(xiàn)文件預(yù)覽功能的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)文件預(yù)覽功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: