目錄

H5移動端附件下載

1. 使用 window.open() 進行下載

2. 使用 a 標簽創建隱藏的可下載鏈接

3. 使用 iframe 進行下載

4. 使用 FileSaver.js 插件下載

4.1 Vue項目中導入并使用下載附件

4.2 FileSaver.js 的其他知識

---

H5移動端附件下載

1. 使用 window.open() 進行下載

window.open(file.fileUrl)

2. 使用 a 標簽創建隱藏的可下載鏈接

let ele = document.createElement('a')
ele.download = file.fileName
ele.style.display = 'none'
ele.href = file.fileUrl
document.body.appendChild(ele)
ele.click()
document.body.removeChild(ele)

3. 使用 iframe 進行下載

let myFrame = document.createElement('iframe')
myFrame.src = file.fileUrl
myFrame.style.display = 'none'
document.body.appendChild(myFrame)
window.open(file.fileUrl)

4. 使用 FileSaver.js 插件下載

4.1 Vue項目中導入并使用下載附件

FileSaver.js插件傳送門：https://github.com/eligrey/FileSaver.js

# 下載安裝 file-saver 插件
$ cnpm install file-saver --save

import { saveAs } from 'file-saver'
saveAs(fileUrl, fileName)

4.2 FileSaver.js 的其他知識

Blob對象概念：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

• 保存文本

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

• 保存URLs

var FileSaver = require('file-saver');
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

• 保存為 canvas

var FileSaver = require('file-saver');
var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {saveAs(blob, "pretty image.png");
});

• 保存文件

var FileSaver = require('file-saver');
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);