You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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.

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.05 21:18:21