已知文件url，js實現下載

一個本以為很簡單的需求：

后端提供文件的url，前端實現下載！

你會怎樣實現？相信很多人都會選擇<a>標簽, 再加上 h5 提供的 download屬性。我也照做了 ！！！！！但結果呢？

<a download="資信證明.pdf" thref="http://localhost:57483/App/templateFile/05.pdf">下載測試</a>

結果，對於image、pdf、js等文件，是在瀏覽器中直接打開預覽的方式，而非下載。

因為這些文件都是瀏覽器可以識別的，對於瀏覽器能夠識別的文件，會直接打開。對於路徑錯誤或者不能識別的，例如excel，下載是沒有問題。

網上找了好多方法，大都針對image圖片的下載，試了幾把，優化了一把，也挺好用：

    /*
    圖片的下載
    type：類型，即后綴名
    name：下載的文件名稱
    url：url
    */
    function downloadPicture(type, name, url) {
        var image = new Image()
        // 解決跨域 Canvas 污染問題
        image.setAttribute('crossOrigin', 'anonymous');

        image.src = url;
        image.onload = function () {
            // 創建一個canvas標簽
            var canvas = document.createElement('canvas')
            // 設置canvas的寬高

            canvas.width = image.naturalWidth;
            canvas.height = image.naturalHeight;
            var context = canvas.getContext('2d')
            context.drawImage(image, 0, 0);

            // 把canvas的內容轉化為base64格式
            var imageType = type === "png" ? "image/png" : "image/jpeg";
            var base64url = canvas.toDataURL(imageType)

            // 生成一個a元素
            var a = document.createElement('a');
            a.download = name || '文件下載'
            a.href = base64url
            // 創建一個單擊事件
            var event = new MouseEvent('click');

            // 觸發a的單擊事件
            a.dispatchEvent(event)
        }
    }

但是這個方法，僅僅適用於圖片，對於pdf或其他文件是不行的。

之前做過后端返回文件流，前端下載的例子，無論什么文件，都沒問題，那么遵循這個思路，想辦法把url轉成文件流不就可以了嗎？

於是乎，想到我們可以使用一個原生請求，設置responseType = 'blob' 這樣的話，就可以通過請求文件的url，得到文件流。

    function getFileAndDownload(fileName, url) {
        var x = new XMLHttpRequest();
        x.open("GET", url, true);
        x.responseType = 'blob';
        x.onload = function (e) {
            var blob = x.response;
            if ('msSaveOrOpenBlob' in navigator) {//IE導出
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            }
            else {
                var a = document.createElement('a');
                a.download = fileName;
                a.href = URL.createObjectURL(blob);
                $("body").append(a);
                a.click();
                $(a).remove();
            }
        };
        x.send();
    }

完美解決，適用任何類型的文件。

注意一點是：請求的這個url要允許跨域或者在同域名下，否則也會失敗。