pdf.js预览pdf文件

  • pdf.js预览pdf文件已关闭评论
  • 28 次浏览
  • A+
所属分类:Web前端
摘要

预览pdf一般通过浏览器自带的pdf预览器就可以,但有时候需要窗口预览或自定义操作,可以使用pdf.js操作


使用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>   <div id="app">     <div class="pdf-container">       <canvas         v-for="index in totalPage"         :key="index"         :id="`canvas-${index}`"       ></canvas>     </div>   </div> </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运行目录的问题