pdfjs-dist 实现pdf文件在线预览

实现效果
实现过程
- （1）安装pdfjs-dist
- （2）代码部分
- （3）原理

项目要求实现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: null,pdfPageNumber: null,pdfTotalPages: 1,renderingPage: false,pdfData: null, // PDF的base64scale: 1, // 缩放值};},methods: {uploadFile() {let inputDom = this.$refs.fielinput;let file = inputDom.files[0];let reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {let data = atob(reader.result.substring(reader.result.indexOf(",") + 1));this.loadPdfData(data);};},loadPdfData(data) {// 引入pdf.js的字体let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/";//读取base64的pdf流文件this.pdfData = pdfJS.getDocument({data: data, // PDF base64编码cMapUrl: CMAP_URL,cMapPacked: true,});console.log(this.pdfData);this.renderPage(1);this.renderScrollPdf();},// 根据页码渲染相应的PDFrenderPage(num) {this.renderingPage = true;this.pdfData.promise.then((pdf) => {this.pdfPageNumber = pdf.numPages;pdf.getPage(num).then((page) => {// 获取DOM中为预览PDF准备好的canvasDOM对象let canvas = this.$refs.myCanvas;let viewport = page.getViewport(this.scale);canvas.height = viewport.height;canvas.width = viewport.width;let ctx = canvas.getContext("2d");let renderContext = {canvasContext: ctx,viewport: viewport,};page.render(renderContext).then(() => {this.renderingPage = false;this.pageNo = num;});});});},clickPre() {if (!this.renderingPage && this.pageNo && this.pageNo > 1) {this.renderPage(this.pageNo - 1);}},clickNext() {if (!this.renderingPage &&this.pdfPageNumber &&this.pageNo &&this.pageNo < this.pdfPageNumber) {this.renderPage(this.pageNo + 1);}},renderScrollPdf() {this.pdfData.promise.then((pdf) => {this.pdfTotalPages = pdf.numPages;this.renderScrollPdfPage(1);});},},
};
</script><style scoped>
.main-container {display: flex;flex-direction: column;align-items: center;
}
.canvas-container {width: 400px;height: 500px;border: 1px dashed black;position: relative;display: flex;justify-content: center;
}
.scroll-pdf-contanier {width: 400px;height: 500px;border: 1px dashed black;position: relative;display: flex;flex-direction: column;overflow-y: scroll;
}
.pdf-container {width: 100%;height: 100%;
}
.scroll-pdf-container {width: 350px;
}
.pagination-wrapper {display: flex;justify-content: center;align-items: center;
}
</style>

（3）原理

首先是要传递给pdfjs-dist展示的是以base64的方式传递，这里用了上传文件，将文件流转化成base64进行模拟，一般是由后台传给前端base64数据直接渲染

    uploadFile() {let inputDom = this.$refs.fielinput;let file = inputDom.files[0];let reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {let data = atob(reader.result.substring(reader.result.indexOf(",") + 1));this.loadPdfData(data);};},

loadPdfData函数接受到base64数据后，调用pdf-dist的方法将pdf转换成canvas,相当于用图片的方式展示pdf,而各个浏览器都支持图片，那么就少了很多兼容的问题了
再配合pdf的页数，点击按钮上下切换，功能基本实现

pdfjs-dist 实现pdf文件在线预览相关推荐

java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...
vue-pdf实现pdf文件在线预览
1. 前言 PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件 ...
html5 pdf.js 使用方法,PDF 文件在线预览(pdf.js 使用教程)
因项目开发需要在线展示 PDF文件,为解决 PDF文件在浏览器打开后电子签章.电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题: pdf.js框架为HTML5,无需任何本地支持,兼 ...
vue 实现pdf文件在线预览
PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下第一种,使用vue-pdf 安装 npm install --save vue-pdf 页面代码 <tem ...
网页中动态嵌入PDF文件/在线预览PDF内容
网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发 ...
文件被损坏 java_使用PDF.JS实现pdf文件在线预览时，报文件被损坏的错误
首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 ?file=" width="1024" height=" ...
pdf文件在线预览，兼容多浏览器和手机端
前言最近学习了一下网页在线预览pdf文件的实现方式,主要有: PDFObject:使用起来非常方便,电脑端兼容性好,试过能兼容ie9,也很快,但在手机上一些浏览器无法在线. jquery.media ...
java集成pdf.js实现pdf文件在线预览
最近项目需要实现在线预览pdf文件功能,找来找去,发现有个pdf.js的类库挺好用,直接用js实现在线预览. pdf.js是开源项目,github的地址: https://github.com/moz ...
实现pdf文件在线预览（需要PDF文件的路径）
工作中需要完成一个PDF在线预览的功能,最简单的方法还是使用pdf的插件. 1.首先下载插件链接:https://pan.baidu.com/s/1q4zuHrmjJL9QSEn2Iy5O9Q 提取 ...

pdfjs-dist 实现pdf文件在线预览

pdfjs-dist 实现pdf文件在线预览

实现效果

实现过程

（1）安装pdfjs-dist

（2）代码部分

（3）原理

pdfjs-dist 实现pdf文件在线预览相关推荐

最新文章

热门文章