使用pdfjs-dist实现vue工程pdf在线预览
1、安装（我安装的是这个版本，安装最新的版本在文件中import时会报错：You may need an appropriate loader to handle this file type）
npm install -s pdfjs-dist@2.0.943
2、使用
<template>
<div>
<canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
</div>
</template>
<script>
import PDFJS from "pdfjs-dist"
export default {
name: "pdfPreview",
data(){
return {
pdfDoc: null,
pages: 0
}
},
mounted() {
this.showPdf()
},
methods: {
showPdf: function () {
// 请求本地文件
// let url = '/static/player.pdf'
// 跨域请求文件，需要走后台代理，后台需要将文件流返回前端才可在页面显示
// let url = '/pdf/showPdf?pdfUrl=http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
let url = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
this.loadFile(url)
},
renderPage: function (num) {
let _this = this
this.pdfDoc.getPage(num).then(function (page) {
let canvas = document.getElementById('the-canvas' + num)
let ctx = canvas.getContext('2d')
let dpr = window.devicePixelRatio || 1.0
let bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1.0
let ratio = dpr / bsr
let viewport = page.getViewport(window.screen.availWidth / page.getViewport(1).width)
canvas.width = viewport.width * ratio
canvas.height = viewport.height * ratio
canvas.style.width = viewport.width + 'px'
canvas.style.height = viewport.height + 'px'
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
var renderContext = {
canvasContext: ctx,
viewport: viewport
}
page.render(renderContext)
if (_this.pages > num) {
_this.renderPage(num + 1)
}
})
},
loadFile: function (url) {
let _this = this
PDFJS.getDocument(url).then(function (pdf) {
_this.pdfDoc = pdf
_this.pages = _this.pdfDoc.numPages
_this.$nextTick(() => {
_this.renderPage(1)
})
})
}
}
}
</script>
<style scoped>
canvas {
display: block;
border-bottom: 1px solid black;
}
</style>
3、注意：上面只支持pdf的显示，不支持复制，支持复制的写法见下面：
<template>
<!--<button @click="scalBig">放大</button>-->
<!--<button @click="scalSmall">缩小</button>-->
<!--<p>页码：{{`${pageNo}/${totals.length}`}}</p>-->
<div class="drag-box" id="dragBox" @scroll="scrollfun($event)">
<el-scrollbar style="height: 100%;overflow-y: hidden;">
<div class="wrapper" id="pdf-container">
<div v-for="item in totals" :id="`page-${item}`" :key="item" class="pdf-box">
<canvas :id="'canvas-pdf-' + item" class="canvas-pdf"></canvas>
</div>
</div>
</el-scrollbar>
</div>
</template>
<script>
import PDFJS from 'pdfjs-dist'
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
export default {
name: 'showPdf',
props: ['pdfUrl'],
data () {
return {
scale: 1.4,
totals: [],
pageNo: 1,
viewHeight: 0
}
},
mounted () {
this.renderPdf(this.scale)
},
watch: {
scale (val) {
this.totals = []
this.renderPdf(val)
}
},
methods: {
renderPdf (scale) {
PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min')
// 当 PDF 地址为跨域时，pdf 应该已流的形式传输，否则会出现pdf损坏无法展示
PDFJS.getDocument('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf').then(pdf => {
// 得到PDF的总的页数
let totalPage = pdf.numPages
let idName = 'canvas-pdf-'
// 根据总的页数创建相同数量的canvas
this.createCanvas(totalPage, idName)
for (let i = 1; i <= totalPage; i++) {
pdf.getPage(i).then((page) => {
let pageDiv = document.getElementById(`page-${i}`)
let viewport = page.getViewport(scale)
let canvas = document.getElementById(idName + i)
let context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
this.viewHeight = viewport.height
let renderContext = {
canvasContext: context,
viewport
}
// 如果你只是展示pdf而不需要复制pdf内容功能，则可以这样写render
// page.render(renderContext) 如果你需要复制则像下面那样写利用text-layer
page.render(renderContext).then(() => {
return page.getTextContent()
}).then((textContent) => {
// 创建文本图层div
const textLayerDiv = document.createElement('div')
textLayerDiv.setAttribute('class', 'textLayer')
// 将文本图层div添加至每页pdf的div中
pageDiv.appendChild(textLayerDiv)
// 创建新的TextLayerBuilder实例
let textLayer = new TextLayerBuilder({
textLayerDiv: textLayerDiv,
pageIndex: page.pageIndex,
viewport: viewport
})
textLayer.setTextContent(textContent)
textLayer.render()
})
})
}
})
},
createCanvas (totalPages) {
for (let i = 1; i <= totalPages; i++) {
this.totals.push(i)
}
},
// 分页
scrollfun (e) {
let scrollTop = e.target.scrollTop
if (scrollTop === 0) {
this.pageNo = 1
} else {
this.pageNo = Math.ceil(scrollTop / this.viewHeight)
}
},
// 放大
scalBig () {
this.scale = this.scale + 0.1
},
// 缩小
scalSmall () {
if (this.scale > 1.2) {
this.scale = this.scale - 0.1
}
}
}
}
</script>
<style scoped >
.drag-box {
height: 800px;
background-color: lightgray;
}
.pdf-box {
position: relative;
}
.el-scrollbar__wrap {
overflow-x: hidden;
}
</style>
