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)文章
這篇文章主要介紹了vue3路由新玩法useRoute和useRouter，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文通過(guò)實(shí)例代碼給大家介紹了vue的過(guò)濾器filter的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
vue如何監(jiān)聽(tīng)頁(yè)面的滾動(dòng)的開(kāi)始和結(jié)束
這篇文章主要介紹了vue如何監(jiān)聽(tīng)頁(yè)面的滾動(dòng)的開(kāi)始和結(jié)束，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue?3?表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程
本文給大家介紹Vue3表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要為大家詳細(xì)介紹了vue uniapp實(shí)現(xiàn)分段器效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue利用廣度優(yōu)先搜索實(shí)現(xiàn)watch
這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用廣度優(yōu)先搜索實(shí)現(xiàn)watch（有意思），文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
vue中的$emit 與$on父子組件與兄弟組件的之間通信方式
本文主要對(duì)vue 用$emit 與 $on 來(lái)進(jìn)行組件之間的數(shù)據(jù)傳輸。重點(diǎn)給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，感興趣的朋友一起看看2018-05-05
webpack+vue+express(hot)熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在Vue應(yīng)用中,將頁(yè)面導(dǎo)出為PDF文件通常涉及到前端技術(shù)的組合,下面這篇文章主要給大家介紹了關(guān)于vue2前端導(dǎo)出pdf文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
今天小編就為大家分享一篇vue.js循環(huán)radio的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11