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

一、pdf.js的下载

从官网直接下载即可，地址：http://mozilla.github.io/pdf.js/getting_started/#download

建议下载稳定版本，如下图所示：

下载完成后将压缩包解压放在项目下，按照正常引入方式引入即可。

二、使用pdf.js

1.vue使用

第一步安装：

npm install --save pdfjs-dist

第二步引入：

import pdfjs from 'pdfjs-dist'

第三步就是在页面使用即可，下面演示export default中的代码：

export default {
 data () {
  return {
   pdfdoc: null,
   pagenum: 1,
   pagerendering: false,
   pagenumpending: null,
   scale: 0.9
  }
 },
 methods: {
  showpdf (url) {
   let _this = this
   pdfjs.getdocument(url).then(function (pdf) {
    _this.pdfdoc = pdf
    _this.renderpage(1)
   })
  },
  renderpage (num) {
   this.pagerendering = true
   let _this = this
   this.pdfdoc.getpage(num).then(function (page) {
    var viewport = page.getviewport(_this.scale)
    let canvas = document.getelementbyid('the-canvas')
    canvas.height = viewport.height
    canvas.width = viewport.width

    // render pdf page into canvas context
    var rendercontext = {
     canvascontext: canvas.getcontext('2d'),
     viewport: viewport
    }
    var rendertask = page.render(rendercontext)
  
    // wait for rendering to finish
    rendertask.promise.then(function () {
     _this.pagerendering = false
     if (_this.pagenumpending !== null) {
      // new page rendering is pending
      this.renderpage(_this.pagenumpending)
      _this.pagenumpending = null
     }
    })
   })
  },
  queuerenderpage (num) {
   if (this.pagerendering) {
    this.pagenumpending = num
   } else {
    this.renderpage(num)
   }
  },
  onprevpage () {
   if (this.pagenum <= 1) {
    return
   }
   this.pagenum--
   this.queuerenderpage(this.pagenum)
  },
  onnextpage () {
   if (this.pagenum >= this.pdfdoc.numpages) {
    return
   }
   this.pagenum++
   this.queuerenderpage(this.pagenum)
  }
 }
}

2.html(5)使用

第一步正常下载后解压放入项目中；

第二步在项目的页面引入即可，项目结构如下图：

由于是公司项目，我将项目名遮住，大家自行取名即可，我在此处将pdf.js放入了js目录下，大家也可以直接放在项目的根目录下。

引入如下代码：

<script type='text/javascript' src='js/pdf.js/build/pdf.js'></script>

第三步即可在js中使用。

① 引入单页的pdf：

var url = sessionstorage.sencondexperience_filepath;
pdfjslib.workersrc = 'pdf.js/build/pdf.worker.js';
pdfjslib.getdocument(url).then(function getpdfhelloworld(pdf) {
	pdf.getpage(1).then(function getpagehelloworld(page) {
		var scale = 1;
		var viewport = page.getviewport(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);
	});
});

需要注意的是pdfjslib.workersrc中，如果换成是pdfjs.workersrc会报错：pdfjs is notdefined。有博客说在其之前加上pdfjs.disableworker = true;会避免出错，但我尝试了错误依然存在。使用pdfjslib.workersrc不会出错！！！

②引入多页的pdf:

方法一：在html中设置好pdf页数对应的canvas，然后使用js一页一页的去渲染canvas。

html：

<canvas id="the-canvas01"></canvas>
<canvas id="the-canvas02"></canvas>
<canvas id="the-canvas03"></canvas>

js:

var url = sessionstorage.third_filepath;
pdfjslib.workersrc = 'pdf.js/build/pdf.worker.js';
pdfjslib.getdocument(url).then(function getpdfhelloworld(pdf) {
	pdf.getpage(1).then(function getpagehelloworld(page) {
		var scale = 1;
		var viewport = page.getviewport(scale);
		var canvas = document.getelementbyid('the-canvas01');
		var context = canvas.getcontext('2d');
		canvas.height = viewport.height;
		canvas.width = viewport.width;
		var rendercontext = {
			canvascontext: context,
			viewport: viewport
		};
		page.render(rendercontext);
	});
	pdf.getpage(2).then(function getpagehelloworld(page) {
		var scale = 1;
		var viewport = page.getviewport(scale);
		var canvas = document.getelementbyid('the-canvas02');
		var context = canvas.getcontext('2d');
		canvas.height = viewport.height;
		canvas.width = viewport.width;
		var rendercontext = {
			canvascontext: context,
			viewport: viewport
		};
		page.render(rendercontext);
	});
	pdf.getpage(3).then(function getpagehelloworld(page) {
		var scale = 1;
		var viewport = page.getviewport(scale);
		var canvas = document.getelementbyid('the-canvas03');
		var context = canvas.getcontext('2d');
		canvas.height = viewport.height;
		canvas.width = viewport.width;
		var rendercontext = {
			canvascontext: context,
			viewport: viewport
		};
		page.render(rendercontext);
	});
});

可想而知，这种方法对于页面较少的pdfhia比较合适，但是若是页数很多或者是不知道pdf的页数的情况，这种方法显然不适合了，由此推荐方法二。

方法二：只需要定义好在需要渲染的位置，再根据pdf的页数去动态渲染canvas。

html

< div id="canvas"></ div>

js

//pdf转成图片
var url = sessionstorage.other_filepath;
pdfjslib.workersrc = 'pdf.js/build/pdf.worker.js';
//创建
function createpdfcontainer(id, classname) {
    var pdfcontainer = document.getelementbyid('canvas');
    var canvasnew = document.createelement('canvas');
    $("canvas").on("click",function() {
		var url = sessionstorage.other_filepath;
		window.open(url);
    })
    canvasnew.id = id;
    canvasnew.classname = classname;
    pdfcontainer.appendchild(canvasnew);
};

//渲染pdf
//建议给定pdf宽度
function renderpdf(pdf, i, id) {
    pdf.getpage(i).then(function (page) {

        var scale = 0.62;
        var viewport = page.getviewport(scale);

        //
        //  准备用于渲染的 canvas 元素
        //

        var canvas = document.getelementbyid(id);
        var context = canvas.getcontext('2d');
        canvas.height = viewport.height;
        canvas.width = document.documentelement.clientwidth;

        //
        // 将 pdf 页面渲染到 canvas 上下文中
        //
        var rendercontext = {
            canvascontext: context,
            viewport: viewport
        };
        page.render(rendercontext);
    });
};
//创建和pdf页数等同的canvas数
function createseriescanvas(num, template) {
    var id = '';
    for (var j = 1; j <= num; j++) {
        id = template + j;
        createpdfcontainer(id, 'pdfclass');
    }
}
//读取pdf文件，并加载到页面中
function loadpdf(fileurl) {
    pdfjslib.getdocument(fileurl).then(function (pdf) {
        //用 promise 获取页面
        var id = '';
        var idtemplate = 'cw-pdf-';
        var pagenum = pdf.numpages;
        //根据页码创建画布
        createseriescanvas(pagenum, idtemplate);
        //将pdf渲染到画布上去
        for (var i = 1; i <= pagenum; i++) {
            id = idtemplate + i;
            renderpdf(pdf, i, id);
        }
    });
}
loadpdf(url)

三、报错

1.uncaught typeerror: cannot read property ‘getcontext’ of null

这个错误是因为在html中需要先写好<canvas>标签，定义好id，不能使用div或其他标签。

在html中：

<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导致出错。错误代码如下：

for(const i in pdf.numpages){
	pdf.getpage(i).then(function getpagehelloworld(page) {
		var scale = 1;
		var viewport = page.getviewport(scale);
		var id = i > 9 ? 'the-canvas' + i : 'the-canvas0' + i;
		var canvas = document.getelementbyid(id);
		var context = canvas.getcontext('2d');
		canvas.height = viewport.height;
		canvas.width = viewport.width;
		var rendercontext = {
			canvascontext: context,
			viewport: viewport
		};
		page.render(rendercontext);
	});
}

此时将id打印才明白所有id都为 the-canvas15，出现这个错误主要还是js功底不够扎实导致......所以不能这样简单的循环渲染，正确的解决
方法请看上面的讲解！！！

由此关于pdf.js的使用总结就到这了，有什么问题请留言撒~~

到此这篇关于使用pdf.js渲染canvas实现预览pdf的效果示例的文章就介绍到这了,更多相关pdf.js渲染canvas内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！