Table of contents
H5 mobile terminal attachment download
1. Use window.open() to download
2. Use the a tag to create a hidden downloadable link
4. Use the FileSaver.js plugin to download
4.1 Import and use download attachments in Vue project
4.2 Other knowledge of FileSaver.js
H5 mobile terminal attachment download
1. Use window.open() to download
window.open(file.fileUrl)
2. Use the a tag to create a hidden downloadable link
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. Download using iframe
let myFrame = document.createElement('iframe')
myFrame.src = file.fileUrl
myFrame.style.display = 'none'
document.body.appendChild(myFrame)
window.open(file.fileUrl)
4. Use the FileSaver.js plugin to download
4.1 Import and use download attachments in Vue project
FileSaver.js plug-in portal: https://github.com/eligrey/FileSaver.js
# 下载安装 file-saver 插件
$ cnpm install file-saver --save
import { saveAs } from 'file-saver'
saveAs(fileUrl, fileName)
4.2 Other knowledge of FileSaver.js
Blob object concept: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
- save text
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
- Save URLs
var FileSaver = require('file-saver');
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");
- save as canvas
var FileSaver = require('file-saver');
var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
- save document
var FileSaver = require('file-saver');
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);