使用pdf.js窗口預(yù)覽pdf
一、業(yè)務(wù)場(chǎng)景
預(yù)覽pdf一般通過(guò)瀏覽器自帶的pdf預(yù)覽器就可以，但有時(shí)候需要窗口預(yù)覽或自定義操作，可以使用pdf.js操作
二、使用方法
1. 下載安裝
pdf.js需要構(gòu)建后使用，我們可以直接下載安裝pdfjs-dist，這是構(gòu)建好的版本
npm install pdfjs-dist
這里注意你的環(huán)境，新版本使用了可選鏈，空值合并和私有 class 字段/方法等，如果你的瀏覽器或node版本太低，建議下載低版本的pdfjs-dist，或嘗試引入leagcy文件夾下的兼容版本。
我這里是node12，安裝的是@2.6.347，保險(xiǎn)起見(jiàn)同樣引入legacy兼容版本。
2. 引入使用【vue示例】
通過(guò)循環(huán)創(chuàng)建canvas來(lái)展示每一頁(yè)的內(nèi)容，需要考慮容器和畫布的縮放比。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-776988.html
如果出現(xiàn)依賴引入和打包工具沖突的問(wèn)題，可以手動(dòng)把文件拷貝出來(lái)在html內(nèi)直接引入，默認(rèn)名稱也是pdfjsLib。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-776988.html
<template>
<div id="app">
<div class="pdf-container">
<canvas
v-for="index in totalPage"
:key="index"
:id="`canvas-${index}`"
></canvas>
</div>
</div>
</template>
// 路徑再確認(rèn)下，版本不同路徑可能不同
import pdfjsLib from 'pdfjs-dist/legacy/build/pdf.min.js'
pdfjsLib
.getDocument(this.pdfPath) // 你的pdf路徑
.promise.then((pdfDocument) => {
this.totalPage = pdfDocument.numPages; // 頁(yè)碼
for (let i = 1; i <= pdfDocument.numPages; i++) {
pdfDocument.getPage(i).then((pdfPage) => {
let viewport = pdfPage.getViewport({scale: 1.0});
const containerWidth = document.body.offsetWidth; // 容器寬度
let scaleViewport = pdfPage.getViewport({scale: containerWidth / viewport.width});
let canvas = document.getElementById(`canvas-${i}`);
canvas.width = viewport.width;
canvas.height = viewport.height;
let ctx = canvas.getContext("2d");
let renderTask = pdfPage.render({
canvasContext: ctx,
viewport: scaleViewport,
});
return renderTask.promise;
});
}
})
.catch((err) => {
console.log(err);
console.error("PDF加載失敗");
});
3. 其他問(wèn)題
- 可能會(huì)出現(xiàn)字體缺失，部分空白問(wèn)題
- 可能會(huì)出現(xiàn)worker運(yùn)行目錄的問(wèn)題
到了這里，關(guān)于pdf.js預(yù)覽pdf文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
