Vue實現(xiàn)docx、pdf格式文件在線預(yù)覽功能

更新時間：2022年09月22日 14:11:14 作者：iam_see

在業(yè)務(wù)中，如果遇到文檔管理類的功能，會出現(xiàn)需要在線預(yù)覽的業(yè)務(wù)需求，本文主要是通過第三方庫來實現(xiàn)文檔預(yù)覽功能，并將其封裝成preview組件,感興趣的可以了解一下

介紹

在業(yè)務(wù)中，如果遇到文檔管理類的功能，會出現(xiàn)需要在線預(yù)覽的業(yè)務(wù)需求，本文主要是通過第三方庫來實現(xiàn)文檔預(yù)覽功能，并將其封裝成preview組件

docx

docx的實現(xiàn)需要使用docx-preview插件

安裝

npm i docx-preview

使用

創(chuàng)建一個容器標(biāo)簽

<div ref="file" v-show="extend == 'docx'"></div>

引入并創(chuàng)建渲染函數(shù)

import { renderAsync } from "docx-preview";
renderDocx() {
      renderAsync(this.fileData, this.$refs.file, null, {
        className: "docx", //默認(rèn)和文檔樣式類的類名/前綴
        inWrapper: true, //啟用圍繞文檔內(nèi)容呈現(xiàn)包裝器
        ignoreWidth: false, //禁用頁面的渲染寬度
        ignoreHeight: false, //禁用頁面的渲染高度
        ignoreFonts: false, //禁用字體渲染
        breakPages: true, //在分頁符上啟用分頁
        ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分頁
        experimental: false, //啟用實驗功能（制表符停止計算）
        trimXmlDeclaration: true, //如果為true，則在解析之前將從xml文檔中刪除xml聲明
        useBase64URL: false, //如果為true，圖像、字體等將轉(zhuǎn)換為base 64 URL，否則使用URL.createObjectURL
        useMathMLPolyfill: false, //包括用于鉻、邊等的MathML多填充。
        showChanges: false, //啟用文檔更改的實驗渲染（插入/刪除）
        debug: false, //啟用額外的日志記錄
      });
    },

PDF

pdf的預(yù)覽需要使用PDFJS這個插件,通過將文件流解析寫到canvas上實現(xiàn)預(yù)覽效果

安裝

npm i pdfjs-dist

引入和使用

<canvas
  v-for="num in numPages"
  :key="num"
  :id="'canvas_' + num"
  class="canvas"
></canvas>

此處pdf的渲染數(shù)據(jù)this.fileData必須是一個ArrayBuffer格式的數(shù)據(jù)，如果請求的的數(shù)據(jù)是Blob格式必須要先使用Blob.arrayBuffer()轉(zhuǎn)換

async renderPdf(num = 1) {
      this.fileData.getPage(num).then(page => {
        // 設(shè)置canvas相關(guān)的屬性
        const canvas = document.getElementById("canvas_" + num);
        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: this.pdfScale }); // 設(shè)置放縮比率
        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);
        if (this.numPages > num) {
          setTimeout(() => {
            return this.renderPdf(num + 1);
          });
        }
      });
    },

pdf的放大和縮小

pdf文件渲染后如果不能調(diào)整大小會因為源文件的大小和文件內(nèi)容，出現(xiàn)模糊的問題,所以進行縮放渲染是有必要的

// pdf放大
setPdfZoomin() {
  const max = 2;
  if (this.pdfScale >= max) {
    return;
  }
  this.pdfScale = this.pdfScale + 0.2;
  this.renderPdf();
},
// pdf縮小
setPdfZoomout() {
  const min = 0.6;
  if (this.pdfScale <= min) {
    return;
  }
  this.pdfScale = this.pdfScale - 0.1;
  this.renderPdf();
},

多格式的文件渲染函數(shù)映射

因為將多種文件渲染放在一個文件中，所以處理函數(shù)需要做映射處理，執(zhí)行對應(yīng)格式的文件渲染

renderPreview(extend) {
    const handle = {
    docx: () => {
      this.extend = "docx";
      this.$nextTick(() => this.renderDocx());
    },
    pdf: () => {
      this.extend = "pdf";
      new Blob([this.fileData]).arrayBuffer().then(res => {
        PDFJS.getDocument(res).promise.then(pdfDoc => {
          this.numPages = pdfDoc.numPages; // pdf的總頁數(shù)
          this.fileData = pdfDoc;
          this.$nextTick(() => this.renderPdf());
        });
      });
    },
    };
    this.isLoading = false;
    if (!Object.hasOwn(handle, extend)) {
    this.extendName = extend;
    return (this.extend = "other");
    }
    handle[extend]();
},

不支持的文件提示處理

在這個文件中，目前只支持docx和pdf的預(yù)覽，如果出現(xiàn)了不支持的文件，需要增加一個提示處理，告知用戶例如如下的文件提示

<div class="container" v-show="extend == 'other'">
  <a-alert
    :message="`不支持.${this.extendName}格式的在線預(yù)覽，請下載后預(yù)覽或轉(zhuǎn)換為支持的格式`"
    description="支持docx, pdf格式的在線預(yù)覽"
    type="info"
    show-icon
  />
</div>