下载附件的几种方式

  • Post author:
  • Post category:其他




1. 使用 window.open() 进行下载

window.open(file.fileUrl)



2. 使用 a 标签创建隐藏的可下载链接

let a = document.createElement('a')
a.download = file.fileName // 下载后文件名
a.href = file.fileUrl // 文件url
a.style.display = 'none'
document.body.appendChild(a)
a.click() // 点击触发下载
document.body.removeChild(a) // 下载完成移除元素



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

保存文本

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

保存URLs

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

保存为 canvas

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

保存文件

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

参考文章:

https://www.jianshu.com/p/c46cec4dd762



版权声明:本文为Komorebi_00原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。