PDF.JS报错Uncaught SyntaxError: Unexpected token '{'

### 解决方案 当遇到 `Uncaught SyntaxError: Unexpected token '{'` 错误时，通常是因为加载的 JavaScript 文件存在问题或者路径配置不正确。以下是可能的原因以及对应的解决方案： #### 1. **PDF.js 版本兼容性** 如果使用的 PDF.js 版本较新，而项目环境未完全适配，则可能导致解析错误。建议确认当前项目的 Node.js 和 Webpack 版本是否满足 PDF.js 的最低依赖要求[^1]。 ```javascript // 确认版本匹配 import PDFJS from 'pdfjs-dist/webpack'; console.log(PDFJS.version); // 输出版本号以验证安装是否正常 ``` #### 2. **资源文件缺失或路径错误** PDF.js 运行时需要额外的 worker 文件（如 `pdf.worker.js`）。如果该文件未能正确加载，可能会引发类似的语法错误。确保在项目中正确引入 worker 文件，并将其路径配置为绝对路径[^1]。 ```javascript // 正确引入 pdf.worker.js import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist'; GlobalWorkerOptions.workerSrc = '/path/to/pdf.worker.js'; // 替换为实际路径 const loadingTask = getDocument('example.pdf'); loadingTask.promise.then(pdf => { console.log(`PDF loaded with ${pdf.numPages} pages`); }); ``` #### 3. **HTML 或模板中的字符转义问题** 某些情况下，HTML 模板中的特殊字符（如 `<`, `{`, `}`）未被正确处理也可能导致此错误。检查 HTML 文件是否存在未闭合标签或其他非法字符[^3]。 ```html <!-- 确保 iframe 路径拼接无误 --> <iframe :src="'/static/pdf/web/viewer.html?file=' + encodeURIComponent(src)" class="pdf-viewer"></iframe> ``` > 使用 `encodeURIComponent` 方法可以有效防止 URL 中的特殊字符引起的问题。 #### 4. **跨域请求限制** 如果 PDF 文件存储于远程服务器且存在跨域策略限制，浏览器会阻止其访问并抛出异常。此时需修改 `viewer.js` 文件禁用部分安全校验逻辑[^2]。 ```javascript // 修改 viewer.js 文件 if (origin !== viewerOrigin && protocol !== "blob:") { // 注释掉以下代码片段 // throw new Error("file origin does not match viewer's"); } ``` #### 5. **Webpack 构建优化** 对于 Vue CLI 3.x 用户，在构建过程中可能出现打包混乱的情况。尝试调整 Webpack 配置以单独分离 PDF.js 工具链[^3]。 ```javascript module.exports = { configureWebpack: { externals: { 'pdfjs-dist/build/pdf': 'pdfjsLib', 'pdfjs-dist/web/pdf_viewer': 'PdfJsWebViewer' } } }; ``` --- ### 总结 通过以上方法逐一排查问题根源，可显著降低因语法错误引起的运行失败概率。务必优先核实基础资源配置准确性，再逐步深入分析复杂场景下的潜在冲突因素。