VUE前端導出文件之file-saver插件安裝使用教程
安裝
npm install file-saver --save # 如使用TS開發(fā)，可安裝file-saver的TypeScript類型定義 npm install @types/file-saver --save-dev
如果需要保存大于 blob 大小限制的非常大的文件，或者沒有 足夠的 RAM，然后看看更高級的 StreamSaver.js，它可以通過新的流 API 的強大功能將數(shù)據(jù)直接異步保存到硬盤驅動器。那將有 支持進度、取消和知道何時完成編寫;
FileSaver.js 是在客戶端保存文件的解決方案，非常適合在客戶端上生成文件的 Web 應用程序，但是，如果文件來自 我們建議您首先嘗試使用 Content-Disposition 附件響應標頭，因為它具有更多的跨瀏覽器兼容性。
Content-Disposition附件標頭是從瀏覽器下載文件的最佳首選方式。它具有更好的跨瀏覽器兼容性，沒有任何內存限制，也不需要任何 JavaScript。
Content-Type: application/octet-stream使瀏覽器不兼容呈現(xiàn)頁面，因此瀏覽器的后備解決方案是保存資源。
Content-Length是可選的，使用它將使用戶在進度條中還剩下多少。
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 以獲取跨瀏覽器實現(xiàn)。canvas.toBlob()
引入使用
import { saveAs } from 'file-saver'
保存文件
const blob = new Blob([fileStream]) // fileStream 是文件流，一般從后臺獲取 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 將只使用 . 否則，它將首先檢查它是否支持具有同步頭請求的 cors 標頭。 如果是這樣，它將下載數(shù)據(jù)并使用 blob URL 進行保存。 如果沒有，它將嘗試使用 .a[download]a[download]
標準 W3C 文件 API Blob 接口并非在所有瀏覽器中都可用。Blob.js 是一種跨瀏覽器實現(xiàn)，可以解決此問題。Blob
保存Canvas畫布
var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
注意：標準 HTML5 方法并非在所有瀏覽器中都可用。canvas-toBlob.js 是一個跨瀏覽器，可以填充這一點。canvas.toBlob()canvas.toBlob()
總結
到此這篇關于VUE前端導出文件之file-saver插件安裝使用的文章就介紹到這了,更多相關VUE前端導出文件file-saver插件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的輪播圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
詳解Element-ui NavMenu子菜單使用遞歸生成時使用報錯
這篇文章主要介紹了詳解Element-ui NavMenu子菜單使用遞歸生成時使用報錯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
本文詳細介紹了Vue中nextTick的原理和使用方法,Vue采用異步渲染機制,通過nextTick可以確保在DOM更新后執(zhí)行回調,nextTick依賴微任務和宏任務,優(yōu)先使用Promise,降級到MutationObserver/setTimeout,Vue3進一步優(yōu)化了nextTick,減少了復雜度并提升了性能2025-02-02
學習過?vue2?的寶子們肯定知道，組件傳值是?vue?項目開發(fā)過程中必不可少的功能場景，在?vue2?里面有很多傳值的方式。今天就來和大家講講Vue3的組件傳值方式，需要的可以參考一下2022-07-07
Vue 2.0 中依賴注入 provide/inject組合實戰(zhàn)
這篇文章主要介紹了Vue 2.0 依賴注入 provide/inject組合，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue駝峰與短橫線分割命名中的注意事項，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
這篇文章主要介紹了自定義Vue組件打包、發(fā)布到npm及使用教程 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要給大家介紹了關于vue實現(xiàn)多個tab標簽頁的切換與關閉的相關資料,使用vue.js實現(xiàn)tab切換很簡單,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-10-10
我們在做vue項目時,經(jīng)常會需要引入js,下面這篇文章主要給大家介紹了關于vue引用外部JS并調用JS文件中的方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
整理項目中vue.config.js打包優(yōu)化配置方法
這篇文章主要介紹了整理項目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-02-02