file - 保存在 iframe 中加载的 PDF 文件

Question

我正在尝试保存在 iFrame 中加载的 pdf 文件。默认情况下，iFrame 中有一个按钮可以保存文件，但我想要一个额外的按钮(在 iFrame 之外)来保存文件。

<iframe id="labelFrame" src="loadedFile.pdf"></iframe>

<button id="savePDF">Download File</button>

在javascript中:

 $('#savePDF').click(function(){
    var save = document.getElementById('labelFrame');
    //Save the file by opening the explorer for the user to select the place to save or save the file in a default location, how do I do this?
    }

达到此目的的最佳方法是什么？

Answer 1

我也需要这个问题的答案并找到了解决方案。

在 IFrame 中显示 PDF 时，浏览器将在 <embed> 中呈现它元素，据我所知，我们不能在 javascript 中使用它。

我们需要使用 XMLHttpRequest从服务器获取 PDF 作为 Blob对象只有这样我们才能显示它并使用javascript保存它。

var iframe = document.getElementById('labelFrame'),
    saveBtn = document.getElementById('savePDF'),
    pdfUrl = 'loadedFile.pdf';

var xhr = new XMLHttpRequest();
xhr.open("GET", pdfUrl);
xhr.responseType = 'blob'; // <- important (but since IE10)
xhr.onload = function() {
    var blobUrl = URL.createObjectURL(xhr.response); // <- used for display + download
    iframe.src = blobUrl
    saveBtn.onclick = function() {
        downloadBlob(blobUrl, 'myFilename.pdf');
    }
};
xhr.send();

xhr.onload函数将设置为 src的 iframe 并添加 onclick保存按钮的处理程序

这是 downloadBlob()我在示例中使用的函数

function downloadBlob(blobUrl, filename) {
    var a = document.createElement('a');

    a.href = blobUrl;
    a.target = '_parent';
    // Use a.download if available. This increases the likelihood that
    // the file is downloaded instead of opened by another PDF plugin.
    if ('download' in a) {
        a.download = filename;
    }
    // <a> must be in the document for IE and recent Firefox versions,
    // otherwise .click() is ignored.
    (document.body || document.documentElement).appendChild(a);
    a.click();
    a.remove();
}