我在vue项目中使用了这些插件。
我通过npm install pdfjs-dist
以下是代码： pdf.vue，其中包含如何导入pdf.js和调用函数。
并打开webpack.js文件，我将找到以下代码：
```
'use strict';
var pdfjs = require('./build/pdf.js');
var PdfjsWorker = require('worker-loader!./build/pdf.worker.js');
if (typeof window !== 'undefined' && 'Worker' in window) {
pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();
}
module.exports = pdfjs;
```
```
<template>
<div>
<div id="container" :class="{'back': isShow}" v-if="pdfDoc && isShow">
<!-- / / 添加关闭pdf功能-->
<div class="toolbar">
<div class="toolbarContainer">
<div class="toolbarViewer">
<div class="toolbarViewerLeft fl">
<span class="page left pointer" @click="onPrevPage" v-if="pageNum > 1">上一页</span>
<span class="page right page-left pointer" @click="onNextPage" v-if="pageNum < pdfDoc.numPages"> 下一页 </span>
<span class="page ml_20">{{pageNum}} / </span>
<span class="page">{{pdfDoc ? pdfDoc.numPages : 0}}</span>
</div>
<div class="toolbarViewerRight fr">
<span @click="closePdf">关闭</span>
</div>
<div class="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button class="toolbarButton zoomOut" title="缩小" @click="zoomOut">
<span>缩小</span>
</button>
<div class="splitToolbarButtonSeperator fl"></div>
<button class="toolbarButton zoomIn" title="放大" @click="zoomIn">
<span>放大</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="viewerContainer">
<div class="pdfViewer">
<canvas id="the-canvas"></canvas>
</div>
</div>
</div>
</div>
</template>
<script>
import PDFJS from "pdfjs-dist"
export default {
data() {
return {
isShow: false,
// 通过该属性动态添加类，让pdf显示或隐藏
pdfDoc: null,
// 可以打印发现是一个对象，里面有页数信息等
pageNum: 1,
pageRendering: false,
pageNumPending: null,
scale: 1.2
};
},
methods: {
closePdf() {
this.isShow = false;
this.pdfDoc = null;
},
showPDF(url) {
this.isShow = true;
this.pdfDoc = null;
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);
}
},
zoomOut () {
this.scale -= 0.1;
this.queueRenderPage(this.pageNum)
},
zoomIn () {
this.scale += 0.1;
this.queueRenderPage(this.pageNum)
},
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);
}
}
};
</script>
<style lang="less" scoped>
.back {
background-color: #474747;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
z-index: 2000;
}
.page {
color: #fff;
}
.page-left {
margin-left: 10px;
}
.foot {
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0);
}
.toolbar {
position: relative;
left: 0;
right: 0;
z-index: 9999;
cursor: default;
}
.toolbarContainer {
width: 100%;
position: relative;
height: 32px;
line-height: 32px;
background-color: #474747;
background-image: url('~@/assets/img/texture.png'), linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
}
.toolbarViewer {
height: 32px;
}
.toolbarViewerMiddle {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.toolbarViewerLeft {
margin-left: 100px;
}
.toolbarViewerRight {
margin-right: 100px;
span {
z-index: 200;
color: #fff;
cursor: pointer;
}
}
.viewerContainer {
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 32px;
right: 0;
bottom: 0;
left: 0;
outline: none;
}
.toolbarButton > span {
display: inline-block;
width: 0;
height: 0;
overflow: hidden;
}
.splitToolbarButton > .toolbarButton:first-child, .splitToolbarButton > .toolbarButton:last-child {
position: relative;
margin: 0;
margin-right: -1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-right-color: transparent;
}
.splitToolbarButton > .toolbarButton {
border-radius: 0;
float: left;
}
.splitToolbarButton > .toolbarButton {
position: relative;
}
.toolbarButton.zoomOut::before {
content: url('~@/assets/img/toolbarButton-zoomOut.png');
}
.toolbarButton::before{
position: absolute;
display: inline-block;
top: 4px;
left: 7px;
}
.toolbarButton.zoomIn::before {
content: url('~@/assets/img/toolbarButton-zoomIn.png');
}
.toolbarButton {
border: 0 none;
background: none;
width: 32px;
height: 25px;
min-width: 16px;
padding: 2px 6px 0;
border: 1px solid transparent;
border-radius: 2px;
color: hsla(0,0%,100%,.8);
font-size: 12px;
line-height: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease;
}
.splitToolbarButtonSeperator {
padding: 8px 0;
width: 1px;
background-color: hsla(0,0%,0%,.5);
z-index: 99;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
display: inline-block;
margin: 5px 0;
}
```
index.js
```
import PDF from './pdf'
var $vm
export default {
install (Vue, options) {
if (!$vm) {
const PDFPlugin = Vue.extend(PDF)
$vm = new PDFPlugin().$mount()
document.body.appendChild($vm.$el)
}
Vue.prototype.$showPDF = function (url) {
$vm.showPDF(url)
}
}
}
```
在pdf.vue中，import PDFJS from 'pdfjs-dist'在IE浏览器中工作，但在chrome中不工作，import PDFJS from 'pdfjs-dist/webpack'在chrome中，但在IE中不工作。
希望建议。
非常感谢。