Outlook插件用pdfjs-dist报错:pdfjs_dist_1.default.getDocument不是函数
问题描述
开发Outlook插件时,尝试用pdf.js渲染PDF缩略图(仅浏览器上下文,使用webpack构建),在taskpane.ts中调用getDocument时触发报错:
Uncaught TypeError TypeError: pdfjs_dist_1.default.getDocument is not a function
[报错堆栈信息]
核心代码如下:
import pdfjslib from 'pdfjs-dist'; ... const pdf = pdfjslib.getDocument({data: pdfDataAsB64});
尝试过以下导入方式均无效:
import * as pdfjs from 'pdfjs-dist'; import { getDocument } from 'pdfjs-dist/webpack'; import * as pdfjslib from "pdfjs-dist/build/pdf.mjs"; var pdfjslib = require('pdfjs-dist');
已通过npm i pdfjs-dist安装依赖,智能提示正常,可查看api.d.ts文件。更新:在taskpane.html中直接导入pdf.mjs可正常运行示例,但无法在taskpane.ts中使用pdfjs-dist。
解决方案
1. 正确导入并配置Worker
在webpack构建的Outlook插件环境中,必须使用pdfjs-dist/webpack入口导入,并指定Worker路径,确保webpack能正确处理依赖:
import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/webpack'; // 配置Worker路径,webpack会自动打包对应的Worker文件 GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url).toString(); // 调用getDocument并渲染缩略图 const pdfTask = getDocument({ data: pdfDataAsB64 }); pdfTask.promise.then(pdf => { // 获取PDF第一页 return pdf.getPage(1); }).then(page => { // 设置缩略图缩放比例,0.5表示缩小为原尺寸的50% const viewport = page.getViewport({ scale: 0.5 }); const canvas = document.getElementById('pdf-thumbnail') as HTMLCanvasElement; const context = canvas.getContext('2d'); // 匹配Canvas尺寸与PDF页面视口 canvas.height = viewport.height; canvas.width = viewport.width; // 渲染页面到Canvas生成缩略图 return page.render({ canvasContext: context, viewport: viewport }).promise; });
2. 适配Webpack配置(可选)
如果webpack无法识别Worker文件,需安装worker-loader并修改webpack配置:
首先安装依赖:
npm i worker-loader --save-dev
然后在webpack.config.js中添加规则:
module.exports = { module: { rules: [ { test: /pdf\.worker\.mjs$/, use: { loader: 'worker-loader' } } ] } };
3. 差异原因说明
HTML中直接导入pdf.mjs是原生ES模块加载,浏览器可直接解析模块依赖;而TS+webpack环境下,webpack会对模块进行打包转换,pdf.js的模块结构需要适配webpack的打包规则,必须通过pdfjs-dist/webpack这个专门的入口导入,同时显式配置Worker路径,否则会出现导出方法无法识别的错误。
内容的提问来源于stack exchange,提问作者Tobias J.
相关产品推荐
相关产品推荐

