vue中使用file-saver導出文件的全過程記錄
一、安裝
# 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()從文件保存器導入
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封裝幾種常見格式的導出，這里后臺主要輸出文件流形式，如下：
在文件exportFile.js中封裝方法：
import FileSaver from "file-saver";
export default class fileSave {
/**
* 導出Excel文件
* @param {*} res 文件流
* @param {*} name 文件名
*/
static getExcel(res, name) {
let blob = new Blob([res], {
type: "application/vnd.ms-excel"
});
FileSaver.saveAs(blob, name + ".xlsx");
}
/**
* 導出CSV文件
* @param {*} res 文件流
* @param {*} name 文件名
*/
static getCsv(res, name) {
let blob = new Blob([res], {
type: "application/vnd.ms-excel"
});
FileSaver.saveAs(blob, name + ".csv");
}
/**
* 導出圖片1
* @param {*} url 圖片地址
* @param {*} name 文件名
*/
static getImgURLs(url, name) {
let last = url.substring(url.lastIndexOf("."), url.length);
FileSaver.saveAs(url, `${name}${last}`);
}
/**
* 導出圖片2
* @param {*} res 文件流
* @param {*} name 文件名
*/
static downLoadImg(res, filename) {
let blob = new Blob([res], {
type: "image/jpeg"
});
FileSaver.saveAs(blob, `${filename}.jpg`);
}
}使用：
1.導入
import exportFile from '@/utils/exportFile'
2.使用
exportFile.getExcel(res.data, '近年走勢')
總結(jié)
到此這篇關(guān)于vue中使用file-saver導出文件的文章就介紹到這了,更多相關(guān)vue用file-saver導出文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript的MVVM庫Vue.js入門學習筆記,Vue.js是一個新興的js庫,主要用于實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件,需要的朋友可以參考下2016-05-05
下面小編就為大家?guī)硪黄唵握務(wù)剉ue的過渡動畫(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Vue獲取DOM元素并修改屬性或者樣式，文中通過兩種方法給大家介紹了vue 如何獲取并操作DOM元素,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了vue微信分享出來的鏈接點開是首頁問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
使用Vue-Awesome-Swiper實現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
這篇文章主要介紹了用Vue-Awesome-Swiper實現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了vue3.x 使用jsplumb實現(xiàn)拖拽連線，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
vue-router中query和params的區(qū)別解析
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了vue-router中query和params的區(qū)別 ,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了vue中封裝組件的相關(guān)知識,文中的示例代碼講解詳細,對我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學習一下2023-10-10
后端寫個上傳圖片的接口可不是很簡單，只需要讓這個字段限制為圖片格式，后臺做個保存的邏輯就完事了，前端處理還要牽扯到請求頭，數(shù)據(jù)格式的處理等等問題，按照老傳統(tǒng)把圖片按照字符串往接口put發(fā)現(xiàn)返回的全是400錯誤，直到我知道了前端的FormData方法！2021-05-05