【发布时间】:2019-11-25 05:27:05
【问题描述】:
我正在尝试在 Microsoft Edge 浏览器中打开 PDF 文件。 PDF 文件是使用 Angular 8 中的 jsPDF 库生成的。我编写的代码如下:
import { Component, OnInit } from '@angular/core';
import * as data from '../dummy.json';
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
@Component({
selector: 'app-create-pdf',
templateUrl: './create-pdf.component.html',
styleUrls: ['./create-pdf.component.css']
})
export class CreatePDFComponent implements OnInit {
constructor() { }
ngOnInit() {
debugger;
var columns = [
{title: "ID", dataKey: "id"},
{title: "Name", dataKey: "name"},
{title: "Country", dataKey: "country"},
];
var rows = [
{"id": 1, "name": "Shaw", "country": "Tanzania"},
{"id": 2, "name": "Nelson", "country": "Kazakhstan"},
{"id": 3, "name": "Garcia", "country": "Madagascar"},
];
var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, rows, {
styles: {fillColor: [100, 255, 255]},
columnStyles: {
id: {fillColor: 255}
},
margin: {top: 60},
beforePageContent: function(data) {
doc.text("Header", 40, 30);
}
});
let string = doc.output("datauristring");
let file = this.dataURLtoFile(string,"Report.pdf");
var url = URL.createObjectURL(file);
var newWindow = window.open();
newWindow.document.open();
newWindow.document.write('<html><body><object data = "'+url+'" width = "100%" height = "100%" type = "application/pdf"></object></body></html>');
}
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
}
当我在 Google Chrome 中运行代码时,文件会打开。但是,当我在 Microsoft Edge 中尝试时,屏幕显示 “无法打开 PDF,此 PDF 无法打开” 错误。我尝试清除浏览器的缓存,但仍然显示错误。有人可以通过提供解决方案来帮助我吗?
注意我附上错误消息的屏幕截图供您参考。
提前致谢。
【问题讨论】:
-
您是否尝试过其他浏览器,例如 Chrome 或 Firefox
-
边缘控制台(或开发者工具)中的任何错误???
-
@HirasHaris 是的。我试过谷歌浏览器。它在 Chrome 中运行良好。问题只显示在边缘
-
@SriVenkataPavanKumarMHS,我在控制台中看不到任何具体错误。
-
如果是应该出现的 polyfills 问题...让我们看看,我看到 github issue,如果版本是 edge 11,我认为 promise 可能有问题...我不知道这是否有帮助,但尝试为 promise 添加一个 polyfill
标签: angular microsoft-edge jspdf