vue中使用file-saver導(dǎo)出文件的全過程記錄
一、安裝
# Basic Node.JS installation npm install file-saver --save bower install file-saver
此外,可以通過以下方式安裝TypeScript定義:
# Additional typescript definitions npm install @types/file-saver --save-dev
二、語法
saveAs()從文件保存器導(dǎo)入
import { saveAs } from 'file-saver';
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
傳遞{ autoBom: true }如果你想FileSaver.js自動提供Unicode文本編碼提示(:見字節(jié)順序標記)。請注意,只有在您的Blob類型已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");
儲存文字
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");
在相同來源內(nèi)使用URL只會使用a[download]。否則,它將首先檢查它是否支持帶有同步頭請求的cors標頭。如果是這樣,它將下載數(shù)據(jù)并使用Blob URL保存。如果沒有,它將嘗試使用下載它a[download]。
標準的W3C File API Blob接口并非在所有瀏覽器中都可用。 Blob.js是Blob解決此問題的跨瀏覽器實現(xiàn)。
保存畫布
var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
注意:標準HTML5 canvas.toBlob()方法并非在所有瀏覽器中都可用。 canvas-toBlob.js是一個跨瀏覽器canvas.toBlob(),可以對此進行填充。
保存文件
您可以保存File構(gòu)造函數(shù)而無需指定文件名。如果文件本身已經(jīng)包含名稱,則有很多方法可以獲取文件實例(從存儲,文件輸入,新構(gòu)造函數(shù),剪貼板事件)。如果仍要更改名稱,則可以在第二個參數(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);
四、具體使用
下面是項目中使用file-saver封裝幾種常見格式的導(dǎo)出,這里后臺主要輸出文件流形式,如下:

在文件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, '近年走勢')
總結(jié)
到此這篇關(guān)于vue中使用file-saver導(dǎo)出文件的文章就介紹到這了,更多相關(guān)vue用file-saver導(dǎo)出文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06
Vue使用Multiavatarjs生成自定義隨機頭像的案例
這篇文章給大家介紹了Vue項目中使用Multiavatarjs生成自定義隨機頭像的案例,文中通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2023-10-10
vue中v-for循環(huán)選中點擊的元素并對該元素添加樣式操作
這篇文章主要介紹了vue中v-for循環(huán)選中點擊的元素并對該元素添加樣式操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue中使用video.js實現(xiàn)截圖和視頻錄制與下載
這篇文章主要為大家詳細介紹了Vue中如何使用video.js實現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
Vue2實現(xiàn)未登錄攔截頁面功能的基本步驟和示例代碼
在Vue 2中實現(xiàn)未登錄攔截頁面功能,通常可以通過路由守衛(wèi)和全局前置守衛(wèi)來完成,以下是一個基本的實現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個簡單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04

