vue用FileSaverJs导出文件
FileSaver.js 是在客户端保存文件的解决方案,非常适合 在客户端上生成文件的 Web 应用。它是 HTML5 版本的 saveAs() FileSaver 实现,支持大多数主流的浏览器,其兼容性如下图所示:**
从文件保护程序导入 saveAs()
import { saveAs } from 'file-saver';
使用 保存文本 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");
保存网址
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");
在同一源中使用 URL 将只使用 . 否则,它将首先检查它是否支持具有同步头请求的 cors 标头。 如果是这样,它将下载数据并使用 Blob URL 保存。 如果没有,它将尝试使用 . a[download]``a[download]
标准 W3C 文件 API Blob
接口并非在所有浏览器中都可用。Blob.js 是解决此问题的跨浏览器实现。
保存画布
var canvas = document.getElementById("my-canvas"); canvas.toBlob(function(blob) { saveAs(blob, "pretty image.png"); });
注意:标准 HTML5 方法并非在所有浏览器中都可用。canvas-toBlob.js 是一个跨浏览器,可以填充它。 canvas.toBlob()``canvas.toBlob()
保存文件
可以在不指定文件名的情况下保存 File 构造函数。如果 文件本身已经包含一个名称,有一手手可以获取文件的方法 实例(来自存储、文件输入、新建构造函数、剪贴板事件)。 如果您仍想更改名称,则可以在第二个参数中更改它。
// 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);
#Basic Node.JS installation npm install file-saver --save bower install file-saver
此外,可以通过以下方式安装TypeScript定义:
#Additional typescript definitions npm install @types/file-saver --save-dev
使用例子
后台返回
在export.js中封装方法
export function downloadCloud(url, params, filename, config) { downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", }) return service.post(url, params, { transformRequest: [(params) => { return tansParams(params) }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'blob', ...config }).then(async (data) => { const isLogin = await blobValidate(data); if (isLogin) { const blob = new Blob([data]) saveAs(blob, filename) } else { const resText = await data.text(); const rspObj = JSON.parse(resText); const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'] Message.error(errMsg); } downloadLoadingInstance.close(); }).catch((r) => { console.error(r) Message.error('下载文件出现错误,请联系管理员!') downloadLoadingInstance.close(); }) } /** * 参数处理 * @param {*} params 参数 */ export function tansParams(params) { let result = '' for (const propName of Object.keys(params)) { const value = params[propName]; var part = encodeURIComponent(propName) + "="; if (value !== null && value !== "" && typeof (value) !== "undefined") { if (typeof value === 'object') { for (const key of Object.keys(value)) { if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') { let params = propName + '[' + key + ']'; var subPart = encodeURIComponent(params) + "="; result += subPart + encodeURIComponent(value[key]) + "&"; } } } else { result += part + encodeURIComponent(value) + "&"; } } } return result } // 验证是否为blob格式 export async function blobValidate(data) { try { const text = await data.text(); JSON.parse(text); return false; } catch (error) { return true; } }
页面使用
downloadCloud('url', {}, `name_${new Date().getTime()}.xlsx`)
到此这篇关于vue用FileSaverJs导出文件的文章就介绍到这了,更多相关vue导出文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码功能
这篇文章主要介绍了 ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码,本文基于后端RuoYi-Vue 3.8.7 和 前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字点选验证码为例,不需要键盘手动输入,极大优化了传统验证码用户体验不佳的问题,感兴趣的朋友一起看看吧2023-12-12vue中父子组件传值,解决钩子函数mounted只运行一次的操作
这篇文章主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07Vue echarts实例项目地区销量趋势堆叠折线图实现详解
Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo2022-09-09
最新评论