用Javascript下载PDF文件

Question

I'd like to download a pdf file with javascript. 我想用javascript下载pdf文件。 The file content will be encoded in base64. 文件内容将以base64编码。

Please help me to investagate why I can't download the pdf file. 请帮助我调查为什么我无法下载pdf文件。

index.php: index.php：

<?php
    $file_content =  base64_encode(file_get_contents("1.pdf"));
?>
<!DOCTYPE>
<html>
    <head>
        <title>Download PDF </title>
    </head>

    <body>
        <div>Hello World!</div>
        <input type="button" onclick="download()" value="download"/>

        <script>
            function download() {
                var str = "<?php echo $file_content;?>";
                var a = document.createElement("a");
                document.body.appendChild(a);
                a.style = "display: none";
                var data = window.atob(str);
                var blob = new Blob([data], {type: "application/pdf"});
                var url = window.URL.createObjectURL(blob);
                a.href = url;
                a.download = "download.pdf";
                a.click();
                window.URL.revokeObjectURL(url);            
            }
        </script>
    </body>
</html>

Answer 1

Based on this Medium post , here's a solution that uses the base64 string directly: 根据此Medium帖子，这是一个直接使用base64字符串的解决方案：

function download() {
    var a = document.createElement("a");
    a.style = "display: none";
    a.href = "data:application/pdf;base64,<?= $file_content ?>";
    a.download = "download.pdf";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

Further reading: Data_URIs 进一步阅读： Data_URIs

Answer 2

download attribute will help you to download the file. download属性将帮助您下载文件。

var link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
link.dispatchEvent(new MouseEvent('click'));

Another possible solution: 另一个可能的解决方案：

If you want to download it using blob content than return response must be declared as arraybuffer 如果要使用blob内容下载它，则必须将return response声明为arraybuffer

Example: 例：

$http.post('/postmethod',{params}, {responseType: 'arraybuffer'})
   .success(function (data) {
       var file = new Blob([data], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
       window.open(fileURL);
});

Open the PDF file into new window from where you can save it. 将PDF文件打开到新窗口，从中可以保存它。

用Javascript下载PDF文件

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-07-23 12:31:50

解决方案2
0 2019-07-23 12:16:35

用Javascript下载PDF文件

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-07-23 12:31:50

解决方案2 0 2019-07-23 12:16:35

解决方案1
1 已采纳 2019-07-23 12:31:50

解决方案2
0 2019-07-23 12:16:35