JsPDF

Question

更新 Google Chrome 后，新 Window 中的报告 jsPDF 不再有效。

控制台显示消息：

Not allowed to navigate top frame to data URL: data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1....

你能帮帮我吗？

谢谢。

Answer 1

显然 Google Chrome 已经删除了对顶部框架导航的支持，您可以在此处查看更多信息：https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM

您可以尝试将 jsPDF 呈现为 iFrame

Answer 2

<iframe id="ManualFrame"
        frameborder="0"
        style="border:0"
        allowfullscreen>
</iframe>

<script>
    $(function () {
        setManualFrame();
    });

    function setManualFrame() {
        $("#ManualFrame").attr("height", screen.height);
        $("#ManualFrame").attr("width", screen.width);
        $("#ManualFrame").attr("src", "data:application/pdf;base64," + Your_PDF_Data);
    }
</script>

Answer 3

@kuldeep-choudhary

嗨，事实上，为了解决我正在使用带有 angularJS 的对象标签 1.5.xx

<object ng-attr-data="{{data}}" type="application/pdf"></object>

在脚本中：

$scope.doc.data = $sce.trustAsResourceUrl(doc.output("datauristring"));

在纯 javascript 中，可能像这样工作：

html:

<object id="obj" type="application/pdf" ></object>

js:

document.elementById('obj').data = doc.output("datauristring");

如果我错了，请尝试纠正我。

Answer 4

我最近在使用 FileReader 对象读取内容和显示我的 JSReport 时遇到了同样的问题。

 var reader = new FileReader();                        
 reader.onload = function (e) {
      window.open(reader.result, "_blank");
 }
 reader.readAsDataURL(blob);

不幸的是，在 chrome 更新后，我的所有报告都停止工作了。我试图通过使用 Blob 对象来解决这个问题，它仍然可以工作，但是如果你有一个弹出窗口拦截器，它将无法工作。

 var file = new Blob([blob], { type: 'application/pdf' });
 var fileURL = URL.createObjectURL(file);
 window.open(fileURL);

阅读本主题后，我终于找到了一种通过动态创建 iFrame 来避免此问题的方法，我决定分享 解决方案。

 var file = new Blob([blob], { type: 'application/pdf' });
 var fileURL = URL.createObjectURL(file);
 var win = window.open();
 win.document.write('<iframe src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')

Answer 5

现在 chrome 已经删除了顶部框架导航，这很好用。仅下载 chrome 中的 pdf 会出现问题。下载在 firefox 中运行良好。

var string = doc.output('datauristring');
var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();

Answer 6

也许可以提供帮助，创建一个使用下载属性导出的函数 html5:

var docPdf = doc.output();
exportToFile(docPdf,defaults.type);

function exportToFile(data,type){

    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/'+type+';filename='+'exportar.'+type+';'+'charset=utf-8,' + encodeURI(data);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'exportar.'+type;
    hiddenElement.click();
}

Answer 7

基于Joyston's ，但没有重新解析，因此不需要额外转义：

x=window.open();
iframe=x.document.createElement('iframe')
iframe.width='100%'
iframe.height='100%'
iframe.frameBorder=0
iframe.style="border: 0"
iframe.src='data:text/html........' //data-uri content here
x.document.body.appendChild(iframe);

Answer 8

var pdfUrl = doc.output('datauri').substring(doc.output('datauri').indexOf(',')+1);
var binary = atob(pdfUrl.replace(/\s/g, ''));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
    view[i] = binary.charCodeAt(i);
}

var blob = new Blob( [view], { type: "application/pdf" });
var url = URL.createObjectURL(blob);

function openPDF(){
    window.open(url);
}

Answer 9

与 jspdf 无关，但在这里确实帮助了我（这个问题在 google 中排名第一）：如果为锚标记指定 download="..." 属性，下载提示将正确打开。

Answer 10

使用 download="" 让我能够下载文件

Answer 11

在 angular2+ -

app.component.html -

 <object id="obj"  [attr.data]  type="application/pdf"> </object>

app.component.ts

 document.getElementById('obj').dataset.data = doc.output("datauristring");

  var blob = doc.output("blob");
  window.open(URL.createObjectURL(blob));

Answer 12

/**
 * Creates an anchor element `<a></a>` with
 * the base64 pdf source and a filename with the
 * HTML5 `download` attribute then clicks on it.
 * @param  {string} pdf 
 * @return {void}     
 */
function downloadPDF(pdf) {
    const linkSource = `data:application/pdf;base64,${pdf}`;
    const downloadLink = document.createElement("a");
    const fileName = "vct_illustration.pdf";

    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
}

来源：https://medium.com/octopus-labs-london/downloading-a-base-64-pdf-from-an-api-request-in-javascript-6b4c603515eb

Answer 13

因为 chrome 删除了对 - Top-frame 导航的支持。幸运的是，jsPDF 有一个 API - “save()”，它提供与 doc.output('datauri')

相同的功能

下面是 save()

的示例实现

var doc = new jsPDF();
doc.addImage(imgData, 'JPEG', 0, 0, 300, 160);    
doc.save('fileName.pdf');

保存（文件名，选项）→ {jsPDF|Promise}

另存为 PDF 文档。 jsPDF.output('save', 'filename.pdf') 的别名。使用 FileSaver.js-method 另存为。参考 JSPDF documentation 了解更多信息 -

Answer 14

添加属性下载

<a href="data:image/jpg;base64,/AA/AABBCCDD..." download="name.jpg"></a>

Answer 15

a 元素的 download 属性必须包含文件名。

function window_download( datauri )
{
  const match = datauri.match(/(filename=)([^;]+)/);
  const fileName = match ? match[2] : '' ;
  if ( fileName )
  {
    const downloadLink = document.createElement("a");
    downloadLink.download = fileName;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = datauri ;
    downloadLink.click();
  }
else
{
throw 'missing download file name' ;
}


   // get contents of pdf from jsPDF as a data uri.
    const uri = pdf.output('datauristring', 'packing-list.pdf' );
    window_download( uri ) ;

JsPDF - 不允许将顶部框架导航到数据 URL

JsPDF - Not allowed to navigate top frame to data URL

google-chrome

frame