• 售前

  • 售后

热门帖子
入门百科

利用PDF.js渲染canvas实现预览pdf的结果示例

[复制链接]
我爱霍启刚掖 显示全部楼层 发表于 2021-8-14 14:37:39 |阅读模式 打印 上一主题 下一主题
一、PDF.js的下载

从官网直接下载即可,地点:http://mozilla.github.io/pdf.js/getting_started/#download
发起下载稳固版本,如下图所示:

下载完成后将压缩包解压放在项目下,按照正常引入方式引入即可。
二、利用PDF.js

1.vue利用

第一步安装:
  1. npm install --save pdfjs-dist
复制代码
第二步引入:
  1. import PDFJS from 'pdfjs-dist'
复制代码
第三步就是在页面利用即可,下面演示export default中的代码:
  1. export default {
  2. data () {
  3.   return {
  4.    pdfDoc: null,
  5.    pageNum: 1,
  6.    pageRendering: false,
  7.    pageNumPending: null,
  8.    scale: 0.9
  9.   }
  10. },
  11. methods: {
  12.   showPDF (url) {
  13.    let _this = this
  14.    PDFJS.getDocument(url).then(function (pdf) {
  15.     _this.pdfDoc = pdf
  16.     _this.renderPage(1)
  17.    })
  18.   },
  19.   renderPage (num) {
  20.    this.pageRendering = true
  21.    let _this = this
  22.    this.pdfDoc.getPage(num).then(function (page) {
  23.     var viewport = page.getViewport(_this.scale)
  24.     let canvas = document.getElementById('the-canvas')
  25.     canvas.height = viewport.height
  26.     canvas.width = viewport.width
  27.     // Render PDF page into canvas context
  28.     var renderContext = {
  29.      canvasContext: canvas.getContext('2d'),
  30.      viewport: viewport
  31.     }
  32.     var renderTask = page.render(renderContext)
  33.   
  34.     // Wait for rendering to finish
  35.     renderTask.promise.then(function () {
  36.      _this.pageRendering = false
  37.      if (_this.pageNumPending !== null) {
  38.       // New page rendering is pending
  39.       this.renderPage(_this.pageNumPending)
  40.       _this.pageNumPending = null
  41.      }
  42.     })
  43.    })
  44.   },
  45.   queueRenderPage (num) {
  46.    if (this.pageRendering) {
  47.     this.pageNumPending = num
  48.    } else {
  49.     this.renderPage(num)
  50.    }
  51.   },
  52.   onPrevPage () {
  53.    if (this.pageNum <= 1) {
  54.     return
  55.    }
  56.    this.pageNum--
  57.    this.queueRenderPage(this.pageNum)
  58.   },
  59.   onNextPage () {
  60.    if (this.pageNum >= this.pdfDoc.numPages) {
  61.     return
  62.    }
  63.    this.pageNum++
  64.    this.queueRenderPage(this.pageNum)
  65.   }
  66. }
  67. }
复制代码
2.HTML(5)利用

第一步正常下载后解压放入项目中;
第二步在项目的页面引入即可,项目结构如下图:

由于是公司项目,我将项目名遮住,各人自行取名即可,我在此处将PDF.js放入了js目次下,各人也可以直接放在项目的根目次下。
引入如下代码:
  1. <script type='text/javascript' src='js/PDF.js/build/pdf.js'></script>
复制代码
第三步即可在js中利用。
① 引入单页的pdf:
  1. var url = sessionStorage.sencondExperience_filePath;
  2. pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';
  3. pdfjsLib.getDocument(url).then(function getPdfHelloWorld(pdf) {
  4.         pdf.getPage(1).then(function getPageHelloWorld(page) {
  5.                 var scale = 1;
  6.                 var viewport = page.getViewport(scale);
  7.                 var canvas = document.getElementById('the-canvas');
  8.                 var context = canvas.getContext('2d');
  9.                 canvas.height = viewport.height;
  10.                 canvas.width = viewport.width;
  11.                 var renderContext = {
  12.                         canvasContext: context,
  13.                         viewport: viewport
  14.                 };
  15.                 page.render(renderContext);
  16.         });
  17. });
复制代码
须要留意的是pdfjsLib.workerSrc中,假如换成是PDFJS.workerSrc会报错:PDFJS is notdefined。有博客说在其之前加上PDFJS.disableWorker = true;会避免堕落,但我尝试了错误依然存在。利用pdfjsLib.workerSrc不会堕落!!!
②引入多页的pdf:
方法一:在html中设置好pdf页数对应的canvas,然后利用js一页一页的去渲染canvas。
html:
  1. <canvas id="the-canvas01"></canvas>
  2. <canvas id="the-canvas02"></canvas>
  3. <canvas id="the-canvas03"></canvas>
复制代码
js:
  1. var url = sessionStorage.third_filePath;
  2. pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';
  3. pdfjsLib.getDocument(url).then(function getPdfHelloWorld(pdf) {
  4.         pdf.getPage(1).then(function getPageHelloWorld(page) {
  5.                 var scale = 1;
  6.                 var viewport = page.getViewport(scale);
  7.                 var canvas = document.getElementById('the-canvas01');
  8.                 var context = canvas.getContext('2d');
  9.                 canvas.height = viewport.height;
  10.                 canvas.width = viewport.width;
  11.                 var renderContext = {
  12.                         canvasContext: context,
  13.                         viewport: viewport
  14.                 };
  15.                 page.render(renderContext);
  16.         });
  17.         pdf.getPage(2).then(function getPageHelloWorld(page) {
  18.                 var scale = 1;
  19.                 var viewport = page.getViewport(scale);
  20.                 var canvas = document.getElementById('the-canvas02');
  21.                 var context = canvas.getContext('2d');
  22.                 canvas.height = viewport.height;
  23.                 canvas.width = viewport.width;
  24.                 var renderContext = {
  25.                         canvasContext: context,
  26.                         viewport: viewport
  27.                 };
  28.                 page.render(renderContext);
  29.         });
  30.         pdf.getPage(3).then(function getPageHelloWorld(page) {
  31.                 var scale = 1;
  32.                 var viewport = page.getViewport(scale);
  33.                 var canvas = document.getElementById('the-canvas03');
  34.                 var context = canvas.getContext('2d');
  35.                 canvas.height = viewport.height;
  36.                 canvas.width = viewport.width;
  37.                 var renderContext = {
  38.                         canvasContext: context,
  39.                         viewport: viewport
  40.                 };
  41.                 page.render(renderContext);
  42.         });
  43. });
复制代码
可想而知,这种方法对于页面较少的pdfHIA比较合适,但是如果页数许多大概是不知道pdf的页数的环境,这种方法显然不得当了,由此保举方法二。
方法二:只须要界说幸亏须要渲染的位置,再根据pdf的页数去动态渲染canvas。
html
  1. < div id="canvas"></ div>
复制代码
js
  1. //PDF转成图片
  2. var url = sessionStorage.other_filePath;
  3. pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';
  4. //创建
  5. function createPdfContainer(id, className) {
  6.     var pdfContainer = document.getElementById('canvas');
  7.     var canvasNew = document.createElement('canvas');
  8.     $("canvas").on("click",function() {
  9.                 var url = sessionStorage.other_filePath;
  10.                 window.open(url);
  11.     })
  12.     canvasNew.id = id;
  13.     canvasNew.className = className;
  14.     pdfContainer.appendChild(canvasNew);
  15. };
  16. //渲染pdf
  17. //建议给定pdf宽度
  18. function renderPDF(pdf, i, id) {
  19.     pdf.getPage(i).then(function (page) {
  20.         var scale = 0.62;
  21.         var viewport = page.getViewport(scale);
  22.         //
  23.         //  准备用于渲染的 canvas 元素
  24.         //
  25.         var canvas = document.getElementById(id);
  26.         var context = canvas.getContext('2d');
  27.         canvas.height = viewport.height;
  28.         canvas.width = document.documentElement.clientWidth;
  29.         //
  30.         // 将 PDF 页面渲染到 canvas 上下文中
  31.         //
  32.         var renderContext = {
  33.             canvasContext: context,
  34.             viewport: viewport
  35.         };
  36.         page.render(renderContext);
  37.     });
  38. };
  39. //创建和pdf页数等同的canvas数
  40. function createSeriesCanvas(num, template) {
  41.     var id = '';
  42.     for (var j = 1; j <= num; j++) {
  43.         id = template + j;
  44.         createPdfContainer(id, 'pdfClass');
  45.     }
  46. }
  47. //读取pdf文件,并加载到页面中
  48. function loadPDF(fileURL) {
  49.     pdfjsLib.getDocument(fileURL).then(function (pdf) {
  50.         //用 promise 获取页面
  51.         var id = '';
  52.         var idTemplate = 'cw-pdf-';
  53.         var pageNum = pdf.numPages;
  54.         //根据页码创建画布
  55.         createSeriesCanvas(pageNum, idTemplate);
  56.         //将pdf渲染到画布上去
  57.         for (var i = 1; i <= pageNum; i++) {
  58.             id = idTemplate + i;
  59.             renderPDF(pdf, i, id);
  60.         }
  61.     });
  62. }
  63. loadPDF(url)
复制代码
三、报错

1.Uncaught TypeError: Cannot read property ‘getContext’ of null
这个错误是因为在html中须要先写好<canvas>标签,界说好id,不能利用div或其他标签。
在html中:
  1. <canvas id="my-canvas"></canvas>
复制代码
2.Uncaught (in promise) UnknownErrorException {name: “UnknownErrorException”, message: “Failed to fetch”, details: “UnknownErrorException: Failed to fetch”}
这个意思是未能捕获未知错误。我在此处堕落的原因紧张是背景给的pdf路径有问题导致的,换一个精确的即可~~
3.Uncaught (in promise) InvalidPDFException {name: “InvalidPDFException”, message: “Invalid PDF structure”}
这个意思是说无效的PDF格式的结构,其实就是代码中渲染pdf时的结构出现错误导致的,我是因为直接对pdf的页数:pdf.numPages循环,再去
渲染在canvas导致堕落。错误代码如下:
  1. for(const i in pdf.numPages){
  2.         pdf.getPage(i).then(function getPageHelloWorld(page) {
  3.                 var scale = 1;
  4.                 var viewport = page.getViewport(scale);
  5.                 var id = i > 9 ? 'the-canvas' + i : 'the-canvas0' + i;
  6.                 var canvas = document.getElementById(id);
  7.                 var context = canvas.getContext('2d');
  8.                 canvas.height = viewport.height;
  9.                 canvas.width = viewport.width;
  10.                 var renderContext = {
  11.                         canvasContext: context,
  12.                         viewport: viewport
  13.                 };
  14.                 page.render(renderContext);
  15.         });
  16. }
复制代码
此时将id打印才明白所有id都为 the-canvas15,出现这个错误紧张还是js功底不敷踏实导致......所以不能这样简单的循环渲染,精确的解决
方法请看上面的解说!!!
由此关于PDF.js的利用总结就到这了,有什么问题请留言撒~~
到此这篇关于利用PDF.js渲染canvas实现预览pdf的效果示例的文章就先容到这了,更多相关PDF.js渲染canvas内容请搜刮脚本之家从前的文章或继续浏览下面的相关文章,盼望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作