vue中使用file-saver導(dǎo)出文件的全過(guò)程記錄
一、安裝
# 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
二、語(yǔ)法
saveAs()從文件保存器導(dǎo)入
import { saveAs } from 'file-saver';
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
傳遞{ autoBom: true }如果你想FileSaver.js自動(dòng)提供Unicode文本編碼提示(:見(jiàn)字節(jié)順序標(biāo)記)。請(qǐng)注意,只有在您的Blob類(lèi)型已charset=utf-8設(shè)置的情況下才能執(zhí)行此操作。
三、例子
使用保存文字 require()
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
儲(chǔ)存文字
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");
在相同來(lái)源內(nèi)使用URL只會(huì)使用a[download]。否則,它將首先檢查它是否支持帶有同步頭請(qǐng)求的cors標(biāo)頭。如果是這樣,它將下載數(shù)據(jù)并使用Blob URL保存。如果沒(méi)有,它將嘗試使用下載它a[download]。
標(biāo)準(zhǔn)的W3C File API Blob接口并非在所有瀏覽器中都可用。 Blob.js是Blob解決此問(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()方法并非在所有瀏覽器中都可用。 canvas-toBlob.js是一個(gè)跨瀏覽器canvas.toBlob(),可以對(duì)此進(jìn)行填充。
保存文件
您可以保存File構(gòu)造函數(shù)而無(wú)需指定文件名。如果文件本身已經(jīng)包含名稱(chēng),則有很多方法可以獲取文件實(shí)例(從存儲(chǔ),文件輸入,新構(gòu)造函數(shù),剪貼板事件)。如果仍要更改名稱(chēng),則可以在第二個(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);
四、具體使用
下面是項(xiàng)目中使用file-saver封裝幾種常見(jiàn)格式的導(dǎo)出,這里后臺(tái)主要輸出文件流形式,如下:

在文件exportFile.js中封裝方法:
import FileSaver from "file-saver";
export default class fileSave {
/**
* 導(dǎo)出Excel文件
* @param {*} res 文件流
* @param {*} name 文件名
*/
static getExcel(res, name) {
let blob = new Blob([res], {
type: "application/vnd.ms-excel"
});
FileSaver.saveAs(blob, name + ".xlsx");
}
/**
* 導(dǎo)出CSV文件
* @param {*} res 文件流
* @param {*} name 文件名
*/
static getCsv(res, name) {
let blob = new Blob([res], {
type: "application/vnd.ms-excel"
});
FileSaver.saveAs(blob, name + ".csv");
}
/**
* 導(dǎo)出圖片1
* @param {*} url 圖片地址
* @param {*} name 文件名
*/
static getImgURLs(url, name) {
let last = url.substring(url.lastIndexOf("."), url.length);
FileSaver.saveAs(url, `${name}${last}`);
}
/**
* 導(dǎo)出圖片2
* @param {*} res 文件流
* @param {*} name 文件名
*/
static downLoadImg(res, filename) {
let blob = new Blob([res], {
type: "image/jpeg"
});
FileSaver.saveAs(blob, `${filename}.jpg`);
}
}使用:
1.導(dǎo)入
import exportFile from '@/utils/exportFile'
2.使用
exportFile.getExcel(res.data, '近年走勢(shì)')
總結(jié)
到此這篇關(guān)于vue中使用file-saver導(dǎo)出文件的文章就介紹到這了,更多相關(guān)vue用file-saver導(dǎo)出文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
利用Vue實(shí)現(xiàn)簡(jiǎn)易播放器的完整代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實(shí)現(xiàn)簡(jiǎn)易播放器的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
使用vue構(gòu)建多頁(yè)面應(yīng)用的示例
這篇文章主要介紹了使用vue構(gòu)建多頁(yè)面應(yīng)用的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-10-10
Vue使用Multiavatarjs生成自定義隨機(jī)頭像的案例
這篇文章給大家介紹了Vue項(xiàng)目中使用Multiavatarjs生成自定義隨機(jī)頭像的案例,文中通過(guò)代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作
這篇文章主要介紹了vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue中使用video.js實(shí)現(xiàn)截圖和視頻錄制與下載
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用video.js實(shí)現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
詳解Vue學(xué)習(xí)筆記進(jìn)階篇之列表過(guò)渡及其他
本篇文章主要介紹了詳解Vue學(xué)習(xí)筆記進(jìn)階篇之列表過(guò)渡及其他,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07
Vue2實(shí)現(xiàn)未登錄攔截頁(yè)面功能的基本步驟和示例代碼
在Vue 2中實(shí)現(xiàn)未登錄攔截頁(yè)面功能,通??梢酝ㄟ^(guò)路由守衛(wèi)和全局前置守衛(wèi)來(lái)完成,以下是一個(gè)基本的實(shí)現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個(gè)簡(jiǎn)單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04
vue2與vue3下如何訪問(wèn)使用public下的文件
這篇文章主要介紹了vue2與vue3下如何訪問(wèn)使用public下的文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05

