介紹

在業務中，如果遇到文檔管理類的功能，會出現需要線上預覽的業務需求，本文主要是通過第三方庫來實現文檔預覽功能，並將其封裝成preview組件

docx

docx的實現需要使用docx-preview插件

安裝

npm i docx-preview

使用

創建一個容器標簽

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

引入並創建渲染函數

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

PDF

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

安裝

npm i pdfjs-dist

引入和使用

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

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

async renderPdf(num = 1) {
      this.fileData.getPage(num).then(page => {
        // 設置canvas相關的屬性
        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 }); // 設置放縮比率
        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,
        };
        // 數據渲染到canvas畫布上
        page.render(renderContext);
        if (this.numPages > num) {
          setTimeout(() => {
            return this.renderPdf(num + 1);
          });
        }
      });
    },

pdf的放大和縮小

pdf文件渲染後如果不能調整大小會因為源文件的大小和文件內容，出現模糊的問題,所以進行縮放渲染是有必要的

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

多格式的文件渲染函數映射

因為將多種文件渲染放在一個文件中，所以處理函數需要做映射處理，執行對應格式的文件渲染

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的總頁數
          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的預覽，如果出現了不支持的文件，需要增加一個提示處理，告知用戶
例如如下的文件提示

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

總結

本文只是簡單的總結了關於文件預覽的純前端實現和封裝方式，對於業務的思路簡單整理，如果是對於有更複雜的場景，還需要有更加具體的拆分和優化。