使用pdfjs-dist绘制pdf文件

版本声明：

vue@3.2.1pdfjs-dist@2.5.207

ps：如果使用 vue 3.x 的版本，切记不要使用太高的 pdfjs-dist 版本，会有语法报错

函数引入：

  import * as PDFJS from 'pdfjs-dist';if (!PDFJS.GlobalWorkerOptions.workerSrc) {// 此处的 pdf work 文件放置到了 根目录/public/js/pdfjs 下PDFJS.GlobalWorkerOptions.workerSrc = 'js/pdfjs/pdf.worker.js';}

ps：public/js/pdfjs 下的文件是从 pdfjs-dist 的npm包的build文件下的文件复制的

使用代码：

<!-- 用来装填pdfjs生成的canvas -->
<div id="pdfContainerRef"></div>

// setup 函数中需要定义的变量
// pdf附件的url地址
const url = ref();
// 此loading变量用来判断页面加载动画的显隐
// 如不需要可以不定义，下面的方法中也可以注释掉该loading变量的变更
const loading = ref(false);

// 记得引入nextTick，此方法需要在 url 已经存在正确的pdf路径后再调用执行
const handleInitPdf = () => {nextTick(() => {// 初始化在线预览pdfPDFJS.getDocument(url.value).promise.then((pdfDoc_) => {for (let i = 1; i <= pdfDoc_.numPages; i++) {// Using promise to fetch the pagepdfDoc_.getPage(i).then((page) => {// 用来计算页面宽度以变更缩放比例var desiredWidth = document.body.clientWidth || document.body.offsetWidth || document.body.scrollWidth;var viewport = page.getViewport({ scale: 1 });var scaledViewport = page.getViewport({ scale: desiredWidth / viewport.width });// 创建canvas元素并绘制内容const canvas = document.createElement('canvas');canvas.setAttribute('id', `canvasId${i}`);const context = canvas.getContext('2d');canvas.height = scaledViewport.height;canvas.width = scaledViewport.width;// 在canvas画布上绘制pdfconst renderContext = {canvasContext: context,viewport: scaledViewport,};const renderTask = page.render(renderContext);document.getElementById('pdfContainerRef').appendChild(canvas);// 渲染完成执行renderTask.promise.then(() => {loading.value = false;});});}});});};

出现的问题记录：

版本兼容问题
pdf work 路径问题
getViewport 配置传参在不同的版本中使用上存在差异

使用pdfjs-dist绘制pdf文件相关推荐

Python绘制PDF文件~超简单的小程序
Python绘制PDF文件项目简介这次项目很简单,本次项目课,代码不超过40行,主要是使用 urllib和reportlab模块,来生成一个pdf文件. reportlab官方文档 http:// ...
利用pdfjs在线显示pdf文件
1.下载pdf.js插件:https://gitee.com/liuhaipeng1130/pdfjs 2.创建Vue项目将下载好的pdf.js插件放在static文下 3.新建一个pdf页面用' ...
若依后端实现pdfjs预览PDF文件
PDF.js用于解析和呈现PDF 的通用.基于 Web 标准的平台. 官网地址:http://mozilla.github.io/pdf.js/ 目录一.下载pdfjs安装包 (1)官网下载 (2) ...
springboot使用pdfjs预览office文件
由于springboot使用aspose预览office文件可以实现文件预览,但部分浏览器却不兼容,所以使用pdfjs预览office文件,兼容浏览器. 在springboot使用aspose预览of ...
Python使用matplotlib可视化绘制并通过Tkinter生成按钮将可视化结果导出为pdf文件
Python使用matplotlib可视化绘制并通过Tkinter生成按钮将可视化结果导出为pdf文件目录 Python使用matplotlib
Python使用matplotlib可视化绘制并导出可视化结果图表到PDF文件中
Python使用matplotlib可视化绘制并导出可视化结果图表到PDF文件中目录 Python使用matplotlib可视化绘制并导出可视化结果图表到PDF文件中
在线预览pdf文件（pdfJS）
使用pdfjs目的是为了打开pdf的文件,打开pdf文件有了两种方式,一种是直接打开pdf 的文件,一种是打开pdf 的文件流.传参的话,直接打开PDF文件很简单,这里就不赘述了:打开文件流会出现两个 ...
Python调用pikepdf模块解密PDF文件（使用tkinter模块绘制GUI）
Python调用pikepdf模块解密.合并PDF文件(使用tkinter模块绘制GUI) 安装模块 pip install pikepdf 代码 #!/usr/bin/pythonimport os ...
java swing预览pdf_java – 如何使用iText将Swing组件绘制为PDF文件？
我想通过iText将我的Swing JComponent打印到pdf. JComponent com = new JPanel(); com.add( new JLabel("hello&q ...

使用pdfjs-dist绘制pdf文件

版本声明：

函数引入：

使用代码：

出现的问题记录：

使用pdfjs-dist绘制pdf文件相关推荐

最新文章

热门文章