前端實(shí)現(xiàn)docx、pdf格式文件在線預(yù)覽方式

發(fā)布日期：2022/9/25 23:26:54      瀏覽量：

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

docx

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

安裝

npm i docx-preview

使用

創(chuàng)建一個(gè)容器標(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, //啟用實(shí)驗(yàn)功能（制表符停止計(jì)算） trimXmlDeclaration: true, //如果為true，則在解析之前將從xml文檔中刪除xml聲明 useBase64URL: false, //如果為true，圖像、字體等將轉(zhuǎn)換為base 64 URL，否則使用URL.createObjectURL useMathMLPolyfill: false, //包括用于鉻、邊等的MathML多填充。 showChanges: false, //啟用文檔更改的實(shí)驗(yàn)渲染（插入/刪除） debug: false, //啟用額外的日志記錄 });
    },

PDF

pdf的預(yù)覽需要使用PDFJS這個(gè)插件,通過將文件流解析寫到canvas上實(shí)現(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必須是一個(gè)ArrayBuffer格式的數(shù)據(jù)，如果請(qǐng)求的的數(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)整大小會(huì)因?yàn)樵次募拇笮『臀募?nèi)容，出現(xiàn)模糊的問題,所以進(jì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ù)映射

因?yàn)閷⒍喾N文件渲染放在一個(gè)文件中，所以處理函數(shù)需要做映射處理，執(zhí)行對(duì)應(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]();
},

不支持的文件提示處理

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

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

總結(jié)

本文只是簡(jiǎn)單的總結(jié)了關(guān)于文件預(yù)覽的純前端實(shí)現(xiàn)和封裝方式，對(duì)于業(yè)務(wù)的思路簡(jiǎn)單整理，如果是對(duì)于有更復(fù)雜的場(chǎng)景，還需要有更加具體的拆分和優(yōu)化。

本文作者： chenSee

本文鏈接： https://www.cnblogs.com/wanna2leo/p/16717991.html