引用pdf-dist
npm install pdf-dist
(注意固定版本号)
package.json版本号详解
~匹配最近小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但不包括1.3.0
^匹配最新大版本依赖包,比如^1.2.3会匹配所有1.x.x的版本,包括1.3.0,但不包括2.0.0
*意味着安装最新版本依赖包
Uncaught SyntaxError: Unexpected token <
如果报这个错:
固定版本号,不同版本不同可能存在兼容问题同时使用官方建议写法
import * as pdfjs from 'pdfjs-dist'
import * as PdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
获取文件对象
// url必须是字符串,Uint8Array或者直接import的pdf文件(wepback添加file-loader)
const loadingTask = pdfjs.getDocument(url)
loadingTask.promise.then(pdf=>{
# PDF 能够获取到PDF的页数
})
获得每页对象
pdf.getPage(num).then(page=>{
# num 显示每页
# page 就是PDF每页数据对象
})
渲染到页面
var scale = 1.5; # 缩放大小
var viewport = page.getViewport({ scale: scale, });
# 创建一个 Canvas 画布
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
# 把 page 信息 render 到 Canvas 中
page.render(renderContext);
动态设置缩放
# 设置默认缩放比率
const oriViewport = page.getViewport({ scale: 1 });
const defaultScale = Math.min(maxWidth, contentWidth) / oriViewport.width;
var desiredWidth = window.devicePixelRatio; # 设备像素比例
# 默认缩放比率 * 设备像素比率 让渲染出来的页面更清晰,解决PDF放大缩小产生的模糊现象
const viewport = page.getViewport({ scale: scale * devicePixelRatio });;
公司大佬优化pdfjs-dist使用cdn
// 校验pdf页数
if (/\.(pdf)$/i.test(newFile.name)) {
const reader = new FileReader()
await reader.readAsArrayBuffer(newFile.file)
reader.onload = async () => {
await loadScript(
'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.8.335/build/pdf.min.js'
)
const pdfjsLib = window['pdfjs-dist/build/pdf']
pdfjsLib.GlobalWorkerOptions.workerSrc =
'//cdn.jsdelivr.net/npm/pdfjs-dist@2.8.335/build/pdf.worker.js'
const loadingTask = pdfjsLib.getDocument(
new Uint8Array(reader.result)
)
const pdfInfo = await loadingTask.promise
if (pdfInfo.numPages && pdfInfo.numPages > 15) {
this.$refs.upload.update(newFile, {
error: 'limit',
active: false,
response: {
error: {
message: '页数超限',
code: 'type'
}
}
})
}
}
}