ReferenceError: HTMLAnchorElement is not defined Angular 7 Universal

Question

我正在开发具有服务器端渲染功能的 angular 7 应用程序，并尝试使用文件保护程序插件下载 pdf 文件。我可以在端口上下载文件，但是当我构建应用程序时，它抛出了这个错误：

ReferenceError: HTMLAnchorElement is not defined at /node_modules/file-saver/dist/FileSaver.min.js

我尝试通过在 server.ts 文件中添加 global['HTMLAnchorElement']=null 使其工作，但它无法正常工作。我也试过降级文件保护插件版本，但仍然遇到同样的错误。

我在过去 24 小时内一直在寻找解决方案，但找不到关于如何修复它的可能解释。

package.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"
  }

如果有人能帮我解决这个问题就太好了。提前致谢。

Answer 1

我尝试了很多使用文件保护插件进行下载但无法使其与 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);

ReferenceError: HTMLAnchorElement is not defined Angular 7 Universal

ReferenceError: HTMLAnchorElement is not defined Angular 7 Universal

angular

angular7

angular-universal

filesaver.js