目次
1. window.open() を使用してダウンロードします
2. a タグを使用して、非表示のダウンロード可能なリンクを作成します
4. FileSaver.js プラグインを使用してダウンロードします
4.1 Vue プロジェクトでダウンロード添付ファイルをインポートして使用する
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");
- URLを保存する
var FileSaver = require('file-saver');
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");
- キャンバスとして保存
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);