PDF 预览。用到了 pdfjs 注意 作者这里的版本 “pdfjs-dist”: “^2.16.105”
安装依赖
npm i pdfjs-dist -D
<template>
<div>
<h1>查看PDF文件</h1>
<input type="button" value="请求文件" ref="inputpdf" @click="selectPdf" />
<br />
<br />
<br />
<el-row justify="center">
<el-col :span="24">
<el-pagination layout="prev, pager, next" small background :total="pdfPagesNum"
@current-change="currentChange" />
</el-col>
</el-row>
<br />
<canvas ref="renderContext"></canvas>
</div>
</template>
<script>
import * as PDFJS from "pdfjs-dist/legacy/build/pdf"; // 引入PDFJS
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
import axios from 'axios'
export default {
data() {
return {
pdfPagesNum: 0,
pdfUrl: '',
readerpdfDoc: null
}
},
methods: {
selectPdf() {
// 这里的文件是 本地用nginx代理的静态文件, 注意文件返回格式一定需要设置为 blob
let url = 'http://127.0.0.1:10010/123.pdf'
axios({
url,
method: 'get',
responseType: 'blob',
headers: {
"Content-Type": "application/pdf",
},
}).then(res => {
let blob = new Blob([res.data])
if (window.createObjectURL != undefined) {
// basic
this.pdfUrl = window.createObjectURL(blob);
} else if (window.URL != undefined) {
// mozilla(firefox)
this.pdfUrl = window.URL.createObjectURL(blob);
} else if (window.webkitURL != undefined) {
// webkit or chrome
this.pdfUrl = window.webkitURL.createObjectURL(blob);
}
this.getPdf(this.pdfUrl, 1);
})
},
getPdf(url, pageNum) {
PDFJS.getDocument(url).promise.then((pdfDoc) => {
this.pdfPagesNum = pdfDoc.numPages * 10; // pdf的总页数
//获取第pageNum页的数据
this.readerpdfDoc = pdfDoc;
this.showPdf(pdfDoc, pageNum)
});
},
currentChange(num) {
this.showPdf(this.readerpdfDoc, num);
},
showPdf(pdfDoc, pageNum) {
pdfDoc.getPage(pageNum).then((page) => {
// 设置canvas相关的属性
const canvas = this.$refs.renderContext
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
const bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1;
const ratio = dpr / bsr;
const viewport = page.getViewport({ scale: 1 });
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);
const context = {
canvasContext: ctx,
viewport: viewport,
};
// 数据渲染到canvas画布上
page.render(context);
});
}
}
}
</script>
PDF实现说明
设置PDFJS.GlobalWorkerOptions.workerSrc的地址
通过PDFJS.getDocument处理pdf数据,返回一个对象pdfDoc
通过pdfDoc.getPage单独获取第1页的数据
创建一个dom元素,设置元素的画布属性
通过page.render方法,将数据渲染到画布上
呈现效果