【pdf.js】pdf文件转canvas，在h5页面直接浏览PDF文件

您所在的位置：网站首页 › js图片转pdf › 【pdf.js】pdf文件转canvas，在h5页面直接浏览PDF文件

【pdf.js】pdf文件转canvas，在h5页面直接浏览PDF文件

2024-06-05 19:47| 来源: 网络整理| 查看: 265

前段时间项目有一个需求，PDF文件要在线浏览，应用到 pdf.js，一些应用经验记录一下。

一、解决过程：

1、首先有一个参考的网站，根据参考，发现PDF文件的每一页都被转成了 canvas

2、第一反应是将PDF文件每一页，先转成 IMG，然后再将图片放到画布上。（难点：img 转 canvas）

var img = new Image(); img.src = '../../../assets/src/images/0_2.png'; img.onload = function () { //创建canvas DOM对象,并设置其宽高和图片一样 var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; //坐标(0,0)表示从此处开始绘制,相当于偏移 canvas.getContext("2d").drawImage(img, 0, 0); $('body').append(canvas) }

这种方式可以实现 img 转 canvas，但pdf不止一页，并且还需要先将pdf先转成img ，所以觉得不可行。

3、然后就找到了 pdf.js 可以将pdf的每一页转成canvas

二、pdf.js的用法

官网地址：http://mozilla.github.io/pdf.js/

在官网的例子里，写了用法，但是转canvas的时候需要指定pdf的具体页数（每次只能转一页）

html部分

js部分(记得要先引pdf.js库，可以在官网下载)

pdfjsLib.getDocument('pdf文件地址').promise.then(function(pdf) { pdf.getPage(1).then(function(page) { var scale = 1.5; var viewport = page.getViewport({ scale: scale, }); var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); //这样就可以将pdf文件的第一页加载到页面的canvas元素里了

第二种：pdf文件为多页

html部分

js部分

//创建canvas元素 function createPdfContainer(id, className) { var pdfContainer = document.getElementById('canvas'); var canvasNew = document.createElement('canvas'); canvasNew.id = id; canvasNew.className = className; pdfContainer.appendChild(canvasNew); }; //建议给定pdf宽度 function renderPDF(pdf, i, id) { pdf.getPage(i).then(function (page) { var scale = 4; //scale的值是canvas的渲染尺寸，影响清晰度 var viewport = page.getViewport({ scale: scale }); // // 准备用于渲染的 canvas 元素 // var canvas = document.getElementById(id); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // // 将 PDF 页面渲染到 canvas 上下文中 // var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }; //创建和pdf页数等同的canvas数 function createSeriesCanvas(num, template) { var id = ''; for (var j = 1; j

【本文地址】

【pdf.js】pdf文件转canvas，在h5页面直接浏览PDF文件

【pdf.js】pdf文件转canvas，在h5页面直接浏览PDF文件

今日新闻

推荐新闻