Vue3 下载文件

在 Vue3 中使用 download.js 下载文件。

Github 地址：https://github.com/rndme/download

download.js 库提供了 download() 函数用于下载文件。下载内容可以是 URL、字符串、Blob 或类型化的数据数组，或者通过将文件数据表示为 base64 或 url 编码字符串的 dataURL。无论输入格式如何，download() 都使用指定的文件名和 mime 信息以与使用 Content-Disposition HTTP 标头的服务器相同的方式保存文件。

1.安装

npm install downloadjs
npm i --save-dev @types/downloadjs

2.语法

download(data, strFileName, strMimeType);

• data - 下载的数据内容，可以是 Blob、File、String 或 dataURL。
• strFileName - 要创建的文件的名称。
• strMimeType - 要下载的文件的 MIME 内容类型。

3.示例

文本

将字符串存储到 dlText.txt 文件中并下载：

download("hello world", "dlText.txt", "text/plain");

dataURL 文本实例：

download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");

blob 文本实例：

download(new Blob(["hello world"]), "dlTextBlob.txt", "text/plain");

url 实例：

download("/robots.txt");

UInt8 文本数组实例：

var str= "hello world",    arr= new Uint8Array(str.length);
str.split("").forEach(function(a,b){
  arr[b]=a.charCodeAt();
});

download( arr, "textUInt8Array.txt", "text/plain" );

HTML

html 字符串实例：

download(document.documentElement.outerHTML, "dlHTML.html", "text/html");

html Blob 实例：

download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");

ajax 回调实例：

$.ajax({
        url: "/download.html",
        success: download.bind(true, "text/html", "dlAjaxCallback.html")
});

二进制文件

图片 URL：

download("/diff6.png");

异步下载图片：

var x=new XMLHttpRequest();
x.open( "GET", "/diff6.png" , true);
x.responseType="blob";
x.onload= function(e){download(e.target.response, "awesomesauce.png", "image/png");};
x.send();