最近接了一個需求，要求用戶點擊下載按鈕后直接下載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，可以使用這個補丁哦.
喜歡的同學可以去我的博客逛逛哦
