确保已安装相应的依赖库:babel-loader和pdfjs-dist。可以使用以下命令安装:
npm install babel-loader pdfjs-dist --save-dev
在webpack.config.js中添加相应的loader配置,确保正确加载babel-loader并将pdfjs-dist作为外部依赖项:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
externals: {
'pdfjs-dist': 'pdfjsLib'
}
};
在需要使用pdfjs-dist的JS文件中通过import语句引入:
import pdfjsLib from 'pdfjs-dist';
在代码中使用pdfjsLib对象,例如:
// 加载PDF文档并渲染至canvas元素中
pdfjsLib.getDocument(url).promise.then(function(pdf) {
pdf.getPage(pageNumber).then(function(page) {
var canvas = document.getElementById('pdf-canvas');
var context = canvas.getContext('2d');
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: context,
viewport: viewport
});
});
});