angular - ReferenceError:未定义 HTMLAnchorElement Angular 7 Universal
问题描述
我正在开发一个带有服务器端渲染的 Angular 7 应用程序,并尝试使用 filesaver 插件下载 pdf 文件。我可以在端口上下载文件,但是当我构建应用程序时,它向我抛出了这个错误:
ReferenceError:HTMLAnchorElement 未在 /node_modules/file-saver/dist/FileSaver.min.js 中定义
我尝试通过添加global['HTMLAnchorElement']=null
server.ts 文件使其工作,但它不是那样工作的。我还尝试降级文件保护插件版本,但仍然遇到相同的错误。
在过去的 24 小时内,我一直在寻找解决方案,但无法找到有关如何修复它的可能解释。
包.json
"dependencies": {
"@agm/core": "1.0.0-beta.5",
"@angular/animations": "7.2.12",
"@angular/cdk": "7.3.7",
"@angular/common": "7.2.12",
"@angular/compiler": "7.2.12",
"@angular/core": "7.2.12",
"@angular/flex-layout": "7.0.0-beta.23",
"@angular/forms": "7.2.12",
"@angular/http": "7.2.12",
"@angular/material": "7.3.7",
"@angular/platform-browser": "7.2.12",
"@angular/platform-browser-dynamic": "7.2.12",
"@angular/platform-server": "7.2.12",
"@angular/pwa": "^0.12.4",
"@angular/router": "7.2.12",
"@angular/service-worker": "7.2.12",
"@fortawesome/angular-fontawesome": "^0.2.0",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-brands-svg-icons": "^5.11.2",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@gorniv/ngx-universal": "^1.1.5",
"@nebular/eva-icons": "^4.5.0",
"@nebular/theme": "^4.5.0",
"@nguniversal/express-engine": "7.1.1",
"@nguniversal/module-map-ngfactory-loader": "7.1.1",
"@ngx-meta/core": "^7.0.10",
"@ngx-share/button": "^7.1.4",
"@ngx-share/buttons": "^7.1.4",
"@ngx-share/core": "^7.1.4",
"@types/file-saver": "^2.0.1",
"@types/stripe-checkout": "^1.0.3",
"angular-calendar": "^0.23.3",
"angular-image-slider": "0.0.8",
"angular-sortablejs": "^2.7.0",
"angular-tree-component": "6.1.0",
"angularfire2": "^5.2.3",
"browser-sync": "^2.26.3",
"core-js": "2.4.1",
"express": "4.16.4",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"hammerjs": "2.0.8",
"helmet": "^3.21.2",
"increase-memory-limit": "^1.0.7",
"intl": "^1.2.4",
"jquery": "3.2.1",
"leaflet": "^1.6.0",
"libphonenumber-js": "^1.7.27",
"moment": "^2.24.0",
"ngx-filesaver": "^2.2.1",
"ngx-universal-cookies": "^8.0.1",
"node-pre-gyp": "^0.14.0",
"perfect-scrollbar": "^1.3.0",
"quill": "^1.3.7",
"regexp-replace-loader": "^1.0.1",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"screenfull": "^3.3.3",
"sortablejs": "^1.10.1",
"tether": "^1.4.7",
"ts-loader": "^3.5.0",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-node-externals": "^1.7.2",
"zone.js": "^0.8.29"
}
如果有人能帮我解决这个问题,那就太好了。提前致谢。
解决方案
我尝试了很多使用文件保护程序插件进行下载,但无法使其与 angular ssr 一起使用。所以我没有使用文件保护程序,而是使用了window.URL.createObjectURL
属性。像这样:
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
const url = window.URL.createObjectURL(response);
a.href = url;
a.download = 'file.pdf';
a.click();
window.URL.revokeObjectURL(url);
推荐阅读
- html - 调整屏幕大小时,Bootstrap 4 导航栏显示相互堆叠的 ml-auto 项目
- javascript - 数组值分配未按预期工作Javascript
- matplotlib - Matplotlib 弃用警告
- javascript - 更改 setInterval 属性以增强游戏敏感性不起作用(js)
- javascript - 通过 JavaScript 在 ins 标记内多次添加值
- c# - 使用多个排序条件对 System.Data.DataTable 进行排序
- c - 调用 libusb_bulk_transfer 或 libusb_interrupt_transfer 时出现“LIBUSB_ERROR_NOT_FOUND”错误
- go - “Go 并发模式:超时,继续”博客中的非阻塞通道
- asp.net - 当 user2 在数据库中更新/添加记录时自动刷新 user1 的页面
- python - 如何正确处理单个元素的迭代导致抛出错误的情况?