pdfjs-dist 实现pdf文件在线预览
项目要求实现pdf文件在线预览,并且pdf预览通过上下页滚动pdf,且兼容ie浏览器
浏览器兼容参照了 这位博主的文章,选择用pdfjs-dist 实现
实现效果
这是我随便写的一个pdf(一共2页),可通过点击上下换页
谷歌浏览器
ie11
实现过程
(1)安装pdfjs-dist
npm install --save pdfjs-dist@2.0.943
这里需要指定2.0.943的版本,试过其他版本的都会多多少少在引入,执行行数时报错
(2)代码部分
<template>
<div class="main-container">
<input type="file" ref="fielinput" @change="uploadFile" />
<div class="canvas-container">
<canvas ref="myCanvas" class="pdf-container"> </canvas>
</div>
<div class="pagination-wrapper">
<button @click="clickPre">上一页</button>
<span>第{
{
pageNo }} / {
{
pdfPageNumber }}页</span>
<button @click="clickNext">下一页</button>
</div>
</div>
</template>
<script>
const pdfJS = require("pdfjs-dist");
pdfJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry");
export default {
mounted() {
},
data() {
return {
pageNo: