PDF File generated using jsPDF doesn't show on Microsoft Edge

孤街醉人 提交于 2020-01-03 06:27:08

问题


I'm currently working on a project, where I have to generate a report on a button click using jsPDF. The code works perfectly fine in Google Chrome and Mozilla Firefox but doesn't work on Microsoft Edge. The PDF document loads in an iframe in the background but the page is white and blank. Can anyone suggest a solution for displaying the PDF correctly in Microsoft Edge?

Note: I cannot share the code because it causes copyright infringement. I'm sorry. Also, the debugger shows no such interface supported error when I click the button.

Thanks in advance.

Here's a sample code I've created to demonstrate the issue:

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 blob = doc.output("dataurlnewwindow");
      var newWindow = window.open(URL.createObjectURL(blob));
      newWindow.document.write('<title>My PDF File Title</title>');    
    }   
  }

来源:https://stackoverflow.com/questions/58969549/pdf-file-generated-using-jspdf-doesnt-show-on-microsoft-edge

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!