快捷導(dǎo)航

VUE前端導(dǎo)出文件之file-saver插件安裝使用教程

更新時(shí)間：2024年05月15日 09:55:35 作者：xyphf_和派孔明

這篇文章主要給大家介紹了關(guān)于VUE前端導(dǎo)出文件之file-saver插件安裝使用的相關(guān)資料,file-saver是一個(gè)用于保存文件的JavaScript庫,它提供了一種簡單的方式來生成和保存文件,支持各種文件類型,例如文本文件、圖片、PDF等,需要的朋友可以參考下

安裝

npm install file-saver --save
# 如使用TS開發(fā)，可安裝file-saver的TypeScript類型定義
npm install @types/file-saver --save-dev

如果需要保存大于 blob 大小限制的非常大的文件，或者沒有足夠的 RAM，然后看看更高級(jí)的 StreamSaver.js，它可以通過新的流 API 的強(qiáng)大功能將數(shù)據(jù)直接異步保存到硬盤驅(qū)動(dòng)器。那將有支持進(jìn)度、取消和知道何時(shí)完成編寫;

FileSaver.js 是在客戶端保存文件的解決方案，非常適合在客戶端上生成文件的 Web 應(yīng)用程序，但是，如果文件來自我們建議您首先嘗試使用 Content-Disposition 附件響應(yīng)標(biāo)頭，因?yàn)樗哂懈嗟目鐬g覽器兼容性。

Content-Disposition附件標(biāo)頭是從瀏覽器下載文件的最佳首選方式。它具有更好的跨瀏覽器兼容性，沒有任何內(nèi)存限制，也不需要任何 JavaScript。
Content-Type: application/octet-stream使瀏覽器不兼容呈現(xiàn)頁面，因此瀏覽器的后備解決方案是保存資源。

Content-Length是可選的，使用它將使用戶在進(jìn)度條中還剩下多少。

Content-Type: 'application/octet-stream; charset=utf-8'
Content-Disposition: attachment; filename="filename.jpg"; filename*="filename.jpg"
Content-Length: <size in bytes>

尋找保存Canva畫布？查看 canvas-toBlob.js 以獲取跨瀏覽器實(shí)現(xiàn)。canvas.toBlob()

引入使用

import { saveAs } from 'file-saver'

保存文件

const blob = new Blob([fileStream])		// fileStream 是文件流，一般從后臺(tái)獲取
saveAs(blob, fileName)					// fileName 保存文件的名稱，需要帶后綴

保存文本require()

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

保持txt文本文件

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

保存 URL

FileSaver.saveAs("https://wwww.xxxx.org/image", "image.jpg");
在同一源中使用 URL 將只使用 . 否則，它將首先檢查它是否支持具有同步頭請(qǐng)求的 cors 標(biāo)頭。 如果是這樣，它將下載數(shù)據(jù)并使用 blob URL 進(jìn)行保存。 如果沒有，它將嘗試使用 .a[download]a[download]

標(biāo)準(zhǔn) W3C 文件 API Blob 接口并非在所有瀏覽器中都可用。Blob.js 是一種跨瀏覽器實(shí)現(xiàn)，可以解決此問題。Blob

保存Canvas畫布

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

注意：標(biāo)準(zhǔn) HTML5 方法并非在所有瀏覽器中都可用。canvas-toBlob.js 是一個(gè)跨瀏覽器，可以填充這一點(diǎn)。canvas.toBlob()canvas.toBlob()

總結(jié)

到此這篇關(guān)于VUE前端導(dǎo)出文件之file-saver插件安裝使用的文章就介紹到這了,更多相關(guān)VUE前端導(dǎo)出文件file-saver插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: