vue用FileSaverJs導(dǎo)出文件
FileSaver.js 是在客戶端保存文件的解決方案，非常適合 在客戶端上生成文件的 Web 應(yīng)用。它是 HTML5 版本的 saveAs() FileSaver 實(shí)現(xiàn)，支持大多數(shù)主流的瀏覽器，其兼容性如下圖所示：**
從文件保護(hù)程序?qū)?saveAs()
import { saveAs } from 'file-saver';使用 保存文本 require()
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");保存文本
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");保存網(wǎng)址
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");
在同一源中使用 URL 將只使用 . 否則，它將首先檢查它是否支持具有同步頭請(qǐng)求的 cors 標(biāo)頭。 如果是這樣，它將下載數(shù)據(jù)并使用 Blob URL 保存。 如果沒(méi)有，它將嘗試使用 . a[download]``a[download] 標(biāo)準(zhǔn) W3C 文件 API Blob 接口并非在所有瀏覽器中都可用。Blob.js 是解決此問(wèn)題的跨瀏覽器實(shí)現(xiàn)。
保存畫(huà)布
var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});注意：標(biāo)準(zhǔn) HTML5 方法并非在所有瀏覽器中都可用。canvas-toBlob.js 是一個(gè)跨瀏覽器，可以填充它。 canvas.toBlob()``canvas.toBlob()
保存文件
可以在不指定文件名的情況下保存 File 構(gòu)造函數(shù)。如果 文件本身已經(jīng)包含一個(gè)名稱，有一手手可以獲取文件的方法 實(shí)例（來(lái)自存儲(chǔ)、文件輸入、新建構(gòu)造函數(shù)、剪貼板事件）。 如果您仍想更改名稱，則可以在第二個(gè)參數(shù)中更改它。
// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);#Basic Node.JS installation npm install file-saver --save bower install file-saver
此外，可以通過(guò)以下方式安裝TypeScript定義：
#Additional typescript definitions npm install @types/file-saver --save-dev
使用例子
后臺(tái)返回
在export.js中封裝方法
export function downloadCloud(url, params, filename, config) {
downloadLoadingInstance = Loading.service({ text: "正在下載數(shù)據(jù)，請(qǐng)稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
return service.post(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
...config
}).then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下載文件出現(xiàn)錯(cuò)誤，請(qǐng)聯(lián)系管理員！')
downloadLoadingInstance.close();
})
}
/**
* 參數(shù)處理
* @param {*} params 參數(shù)
*/
export function tansParams(params) {
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&";
}
}
}
return result
}
// 驗(yàn)證是否為blob格式
export async function blobValidate(data) {
try {
const text = await data.text();
JSON.parse(text);
return false;
} catch (error) {
return true;
}
}頁(yè)面使用
downloadCloud('url', {}, `name_${new Date().getTime()}.xlsx`)到此這篇關(guān)于vue用FileSaverJs導(dǎo)出文件的文章就介紹到這了,更多相關(guān)vue導(dǎo)出文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中使用moment設(shè)置倒計(jì)時(shí)的方法
這篇文章給大家介紹了vue中使用moment設(shè)置倒計(jì)時(shí)的方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
vite vue3 路由配置@找不到文件的問(wèn)題及解決
在Vite項(xiàng)目中配置路由時(shí),可能會(huì)遇到文件路徑錯(cuò)誤導(dǎo)致的加載失敗問(wèn)題,常見(jiàn)的解決辦法包括安裝路徑處理插件、正確設(shè)置vite.config.js中的路徑別名以及重啟項(xiàng)目,通過(guò)正確配置,可以確保路由正確加載對(duì)應(yīng)的界面文件,避免路徑錯(cuò)誤導(dǎo)致的問(wèn)題2024-10-10
vue項(xiàng)目中l(wèi)ess的一些使用小技巧
前段時(shí)間一直在學(xué)習(xí)vue,開(kāi)始記錄一下遇到的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中l(wèi)ess的一些使用小技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
vue如何根據(jù)網(wǎng)站路由判斷頁(yè)面主題色詳解
這篇文章主要給大家介紹了關(guān)于vue如何根據(jù)網(wǎng)站路由判斷頁(yè)面主題色的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue3項(xiàng)目如何國(guó)際化實(shí)戰(zhàn)指南
像很多大型的網(wǎng)址,特別是跨國(guó)際等公司網(wǎng)頁(yè),訪問(wèn)來(lái)自世界各地用戶,所以網(wǎng)頁(yè)的國(guó)際化極其重要的需求,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目如何國(guó)際化的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue3在jsx下父子組件實(shí)現(xiàn)使用插槽方式
這篇文章主要介紹了Vue3在jsx下父子組件實(shí)現(xiàn)使用插槽方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
ElementUI中的el-dropdown傳入多參數(shù)的實(shí)現(xiàn)方法
本文主要介紹了ElementUI中的el-dropdown傳入多參數(shù)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
本文主要介紹了vue全局接入百度地圖的實(shí)現(xiàn)示例，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
利用vue和element-ui設(shè)置表格內(nèi)容分頁(yè)的實(shí)例
下面小編就為大家分享一篇利用vue和element-ui設(shè)置表格內(nèi)容分頁(yè)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
教你如何開(kāi)發(fā)Vite3插件構(gòu)建Electron開(kāi)發(fā)環(huán)境
這篇文章主要介紹了如何開(kāi)發(fā)Vite3插件構(gòu)建Electron開(kāi)發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊，需要的朋友可以參考下2022-11-11