vue pdf canvas 展示 pdfjs pdf.worker.js

尝试过用 ifame 引入pdf 但是获取不到滚动条 embed 引入也不获取不到

尝试用过 vue-pdf 但还是获取不到滚动条

尝试用 PDFObject. 生成embed 也是获取不到
附上参考链接
https://blog.csdn.net/liuyaqi1993/article/details/77822946?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

下面是一些可预览下载看到的效果如果使用注意版本

在线预览 https://daishengloda.github.io/review/dist/index.html#/pdfBasic

下载预览不同上，不是同一个 https://gitee.com/liuyaqi/PDFViewer

PDF.js

https://github.com/mozilla/pdf.js

demo https://mozilla.github.io/pdf.js/web/viewer.html

参考文章
https://www.jianshu.com/p/c086102f3564
https://www.jianshu.com/p/9cd4840f9323
https://www.cnblogs.com/tomofagain/p/10936658.html
http://www.sjzphp.com/webdis/pdfjs_1068.html

https://github.com/rkusa/pdfjs

最后vue 引入pdfjs-dist 生成canvas 显示可以获取到了

安装依赖 npm i pdfjs-dist

"pdfjs": "^2.4.1","pdfjs-dist": "^2.4.456",

我的提示还安装了一个 "module": "^1.2.5",

这里如果是只引入了 import PDFJS from 'pdfjs-dist' 就会报错 PDFJS.GlobalWorkerOptions.workerSrc 需要设置一下，但是我设置了不生效报错找不到设置成下面的就没问题参考链接
https://segmentfault.com/q/1010000013646062

我本地引入pdf.worker.js 但是文件过大vue 加载不动更改设置成下面的就没问题

如果有报错 Error: No PDFJS.GlobalWorkerOptions.workerSrc specified 可参考下面链接
https://www.aciuz.com/tech/PDF-js-workerSrc.html

如有报错 Uncaught SyntaxError: Unexpected token '<' 估计是 pdf.worker.js文件没有找到设置成下面的就没问题
如有报错 'WorkerMessageHandler' of undefined 看pdf.worker.js文件有没有成功引入，我引入成功以后就没有报错了
如有报错可参考下面链接
https://blog.csdn.net/houlai_houlai/article/details/86536316


import PDFJS from 'pdfjs-dist/webpack'

html

<div id="pdfBox"></div>

this.pdfCanvas(this.pdfUrl, 'pdfBox');

// pdf canvas 生成插件函数 pdfCanvas(pdf, nameId){console.log('293pdf 地址', pdf)document.getElementById(nameId).innerHTML = '';// this.loading = truePDFJS.getDocument(pdf).promise.then(pdf => {console.log(149, pdf)var numPages = pdf.numPages;var start = 1;this.renderPageAsync(pdf, numPages, start, nameId);}).catch(error => {console.log(155, error)})},async renderPageAsync(pdf, numPages, current, nameId){console.log(257, "renderPage async");for(let i=1; i<=numPages; i++){console.log(280, i)// pagelet page = await pdf.getPage(i);let scale = 1.5;console.log(284, page.getViewport())let viewport = page.getViewport({ scale: scale});// Prepare canvas using PDF page dimensions.let canvas = document.createElement("canvas");let context = canvas.getContext('2d');document.getElementById(nameId).appendChild(canvas);// document.body.appendChild(canvas);canvas.height = viewport.height;canvas.width = viewport.width;// Render PDF page into canvas context.let renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);}// this.loading = falseconsole.log(document.getElementById('pdfBox').scrollHeight)},

vue pdf canvas 展示 pdfjs pdf.worker.js相关推荐

前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
vue使用canvas渲染pdf
1.原生方法 <div><div class="bottom" style="position: fixed;right: 0">< ...
VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索，在iframe中获取选中文字，监听鼠标事件，右键菜单
一.VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索需求实现:vue实现预览pdf文件,获取到鼠标选中的文字数据.调用pdf.js自带的搜索方法实现搜索功能(后期可以调用该接口满足其他 ...
php+预览和下载pdf文件,vue实现在线预览pdf文件和下载（pdf.js）
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件, ...
vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
react集成react-pdf获取文件流预览下载pdf，展示电子签章
1.下载依赖包代码如下(示例): npm install react-pdf 2.引入依赖包代码如下(示例): import { Document, Page } from 'react-pdf' ...
vue 在线访问word,excel,pdf 文件以及打印
git 项目代码一.pdf 1. vue-pdf 安装 npm i --save vue-pdf 语法在组件种使用import pdf from 'vue-pdf'pdf.createLoadin ...
vue 实现手机端显示pdf
废话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Vue中前端实现生成 PDF 并下载
思路: 通过 html2canvas 将 HTML 页面转换成图片,然后再通过 jspdf 将图片的 base64 生成为 pdf 文件. 安装及引入 // 将页面 html 转换成图片 npm in ...

vue pdf canvas 展示 pdfjs pdf.worker.js

vue pdf canvas 展示 pdfjs pdf.worker.js相关推荐

最新文章

热门文章