theme: vuepress
highlight: atelier-heath-light

介紹

在業務中，如果遇到檔案管理類的功能，會出現需要在線預覽的業務需求，本文主要是通過第三方庫來實作檔案預覽功能，并將其封裝成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"
  
></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 = https://www.cnblogs.com/wanna2leo/archive/2022/09/22/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  v-show="extend == 'other'">
  <a-alert
    :message="`不支持.${this.extendName}格式的在線預覽，請下載后預覽或轉換為支持的格式`"
    description="支持docx, pdf格式的在線預覽"
    type="info"
    show-icon
  />
</div>

總結

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

標籤：其他

上一篇：vue+element-ui后臺管理系統模板

下一篇：前端面試題JavaScript篇——2022-09-22