使用js直接下載pdf文件而不用在新的瀏覽器窗口打開

最近接了一個需求,要求用戶點擊下載按鈕后直接下載pdf文件,而不是打開一個新窗口,讓用戶再去手動保存。

接到需求后我立刻著手在網上查找文檔,發現很多聲稱可以實現直接下載的方法都不行,只有下面這個方法成功實現了我的需求,現在翻譯過來,供更多的人使用。

原文:How to trigger the direct download of a PDF with JavaScript

現在的web應用基本都運行在現代瀏覽器上,科技的進步使得我們有很多新的API接口可以調用,其中一個優勢是我們可以直接使用blob和FileReader下載文件,而不用重定向到一個新的標簽頁。

在這篇文章中,我將將演示在一個web頁面中,直接通過url下載一個pdf文件。

注意

在案例中我們將下載use a PDF hosted in the Mozilla Github IO website,因為它是免費的而且設置好了CORS 頭,我們可以在任何地方使用而不用擔心跨域問題。

依賴

需要使用FileSaver庫來實現下載的目標。這個庫支持UMD,所以你可以直接在script標簽中引入,也可以引入模塊中使用。

如果你使用npm,你可以這樣安裝它:

npm install file-saver --save

然后你就可以像下面這樣使用它了:

var FileSave = require('file-save');
var blob = new Blob(["hello world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello World.txt");

或者

import FileSave from 'file-save';
var blob = new Blob(["hello world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello World.txt");

另外,你還可以直接下載FileSaver然后在標簽中使用它。

如下首先引入js文件

<script src="FileSaver.min.js"></script>

然后使用

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});

saveAs(blob, "hello world.txt");

點此點此查看官方文檔

使用url直接下載pdf

多虧了FileSaver.js,你可以很容的用JavaScript在瀏覽器中保存文件數據。FileSaver.js實現了瀏覽器不支持直接下載的功能,它是在客戶端下載文件,保存web應用數據,或者發送到服務器比較敏感的數據。

在這樣的場景下,你想下載服務器上的pdf文件,但由于某些原因不想讓用戶產生點擊等行為,你可以使用FileSaver.js輕松實現。在下面的例子中,我們通過一個簡單的url下載pdf,根據你的web應用的使用場景,pdf文件僅僅在服務器滿足某些條件的時候才可以下載,最后通過JavaScript下載和處理。

var oReq = new XMLHttpRequest();
// The Endpoint of your server 
var URLToPDF = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";

// Configure XMLHttpRequest
oReq.open("GET", URLToPDF, true);

// Important to use the blob response type
oReq.responseType = "blob";

// When the file request finishes
// Is up to you, the configuration for error events etc.
oReq.onload = function() {
    // Once the file is downloaded, open a new window with the PDF
    // Remember to allow the POP-UPS in your browser
    var file = new Blob([oReq.response], { 
        type: 'application/pdf' 
    });
    
    // Generate file download directly in the browser !
    saveAs(file, "mypdffilename.pdf");
};

oReq.send();

當文件下載結束的時候,保存程序會自動開始保存。

提醒一下哦,如果瀏覽器不支持Blob,可以使用這個補丁哦.

喜歡的同學可以去我的博客逛逛哦

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 概要 64學時 3.5學分 章節安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,290評論 0 3
  • Yahoo!的Exceptional Performance團隊為改善Web性能帶來最佳實踐。他們為此進行了一系列...
    拉風的老衲閱讀 1,868評論 0 1
  • 《水滸傳》中有眾多英雄好漢,楊志就是其中一位。 楊志,綽號“青面獸”,楊家將后人,武舉出身,曾任殿帥府制使,因失陷...
    曹傲雪閱讀 833評論 0 0
  • 有人問他現階段的目標是什么,他說他不知道有什么目標,總之要賺錢。先賺錢讓父母過上好生活,再賺錢給自己結婚,讓對象和...
    周三臨閱讀 187評論 0 0
  • 魂牽夢繞的故鄉,柳絮飛揚,泥土芬芳。踱步在郊外田野上,嗅著泥土的盎然生機,聽著小草的慷慨激昂,心情貌似舒暢! 盡情...
    洛小楊閱讀 279評論 0 0