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作为Blob对象从服务器获取PDF，然后我们就可以显示它并使用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函数将设置为iframe的src，并将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();
}

保存iframe中加载的PDF文件

1 个答案: