javascript - jsPDF 不适用于 Chrome，仅适用于 Firefox 和 Safari

Question

我正在尝试使用 jsPDF 将应用程序导出为 PDF。浏览网页后，在这里抓取一行代码，在那里抓取一个部分 - 我已经设法让它工作了......有点。

它适用于 Firefox 和 Safari，但不适用于 Chrome。

使用的 JS 文件(来自 jsPDF)。也许矫枉过正。与 Jquery 一起。

    <script type="text/javascript" src="PDF/standard_fonts_metrics.js"></script> 
    <script type="text/javascript" src="PDF/split_text_to_size.js"></script>               
    <script type="text/javascript" src="PDF/from_html.js"></script>
    <script type="text/javascript" src="PDF/addhtml.js"></script>               
    <script type="text/javascript" src="PDF/addimage.js"></script>

我使用的代码是这样的:

<script type="text/javascript">
function demoFromHTML() {
  $('#listAreaPDF').css("display", "block");

  var pdf = new jsPDF('p', 'pt', 'letter');
  // source can be HTML-formatted string, or a reference
  // to an actual DOM element from which the text will be scraped.
  source = $('#listAreaPDF')[0];

  pdf.setFontSize(24);
  pdf.text(35, 40, "PDF Title here");

  pdf.setFontSize(10);
  pdf.text(500, 40, "Company Name AB");

  // we support special element handlers. Register them with jQuery-style 
  // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
  // There is no support for any other type of selectors 
  // (class, of compound) at this time.
  specialElementHandlers = {
    // element with id of "bypass" - jQuery style selector
    '#bypassme': function (element, renderer) {
      // true = "handled elsewhere, bypass text extraction"
      return true
    }
  };
  margins = {
    top: 80,
    bottom: 60,
    left: 40,
    width: 522
  };


  // all coords and widths are in jsPDF instance's declared units
  // 'inches' in this case
  pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, {// y coord
      'width': margins.width, // max width of content on PDF
      'elementHandlers': specialElementHandlers
    },
    function (dispose) {
      html2canvas($("#presentationArea"), {
        onrendered: function (canvas) {
          var imgData = canvas.toDataURL(
            'image/png');

          pdf.addImage(imgData, 'PNG', 20, 300);
          pdf.save('Test.pdf');
        }
      });
      // dispose: object with X, Y of the last line add to the PDF 
      // this allow the insertion of new lines after html
      // pdf.save('Test.pdf');
    },
    margins
  );
  $('#listAreaPDF').css("display", "none");
}
</script>

Credit for the code found here.为了适应我的应用程序，我做了一些小改动，添加了一个到 html2canvas 的连接，以将图像从我的应用程序中提取出来并将其放入 PDF 中。这实际上工作正常 - 在 Safari 和 Firefox 中。

在 Chrome 中单击并激活此功能时，我什至没有收到空白 PDF，我什么也得不到。甚至不会生成弹出窗口或页面。

可能是什么原因导致 Firefox 和 Safari 可以运行，但 Chrome 不能运行？我还没有尝试过 Internet Explorer，但我并没有屏住呼吸。如果您知道实现它的方法，我完全赞成。

欢迎您提供任何帮助或建议。

Answer 1

这个问题可能与 chrome 的 deprecation of top-frame navigation 有关.

删除:内容启动顶层框架导航到数据 URL(已删除)

We intend to block web pages from loading data: URLs in the top frame using tags, window.open, window.location and similar mechanisms.

Pseudo URLs such as data: are generally a source of confusion for users. Because of their unfamiliarity, these schemes are widely being used in spoofing and phishing attacks. Users browsing the web ideally should only ever end up on the two well known schemes (http and https).

Deprecated in M58

Removal in M60

https://www.chromestatus.com/feature/5669602927312896

如上述 Google 群组帖子中所述，一个可能的解决方案是使用 iFrame。