pdf.js预览pdf文件
使用pdf.js窗口预览pdf一、业务场景
预览pdf一般通过浏览器自带的pdf预览器就可以，但有时候需要窗口预览或自定义操作，可以使用pdf.js操作
二、使用方法
1. 下载安装
pdf.js需要构建后使用，我们可以直接下载安装pdfjs-dist，这是构建好的版本
npm install pdfjs-dist这里注意你的环境，新版本使用了可选链，空值合并和私有 class 字段/方法等，如果你的浏览器或node版本太低，建议下载低版本的pdfjs-dist，或尝试引入leagcy文件夹下的兼容版本。
我这里是node12，安装的是@2.6.347，保险起见同样引入legacy兼容版本。
2. 引入使用【vue示例】
通过循环创建canvas来展示每一页的内容，需要考虑容器和画布的缩放比。
如果出现依赖引入和打包工具冲突的问题，可以手动把文件拷贝出来在html内直接引入，默认名称也是pdfjsLib。
<template>
<canvas
v-for="index in totalPage"
:key="index"
:id="`canvas-${index}`"
></canvas>
</template>
// 路径再确认下，版本不同路径可能不同
import pdfjsLib from 'pdfjs-dist/legacy/build/pdf.min.js'
pdfjsLib
.getDocument(this.pdfPath) // 你的pdf路径
.promise.then((pdfDocument) => {
this.totalPage = pdfDocument.numPages; // 页码
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. 其他问题
[*]可能会出现字体缺失，部分空白问题
[*]可能会出现worker运行目录的问题
来源:https://www.cnblogs.com/yuyunhao/p/17950318
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]