vue中使用file-saver导出文件的全过程记录

 更新时间:2022年02月20日 10:18:58   作者:rsancy  
这篇文章主要给大家介绍了关于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文本编码提示(:见字节顺序标记)。请注意,只有在您的Blob类型已charset=utf-8设置的情况下才能执行此操作。

三、例子

使用保存文字 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只会使用a[download]。否则,它将首先检查它是否支持带有同步头请求的cors标头。如果是这样,它将下载数据并使用Blob URL保存。如果没有,它将尝试使用下载它a[download]。

标准的W3C File API Blob接口并非在所有浏览器中都可用。 Blob.js是Blob解决此问题的跨浏览器实现。

保存画布

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

注意:标准HTML5 canvas.toBlob()方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器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);
 

四、具体使用

下面是项目中使用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, '近年走势')

总结

到此这篇关于vue中使用file-saver导出文件的文章就介绍到这了,更多相关vue用file-saver导出文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目如何部署运行到tomcat上

    vue项目如何部署运行到tomcat上

    这篇文章主要介绍了vue项目如何部署运行到tomcat上的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue.js 图片上传并预览及图片更换功能的实现代码

    vue.js 图片上传并预览及图片更换功能的实现代码

    这篇文章主要介绍了vue.js 图片上传并预览及图片更换功能,小编主要围绕我们日常使用功能的例子做讲解,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • vuejs实现下拉框菜单选择

    vuejs实现下拉框菜单选择

    这篇文章主要为大家详细介绍了vuejs实现下拉框菜单选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 详解vue3中渲染函数的非兼容变更

    详解vue3中渲染函数的非兼容变更

    这篇文章主要介绍了详解vue3中渲染函数的非兼容变更,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue同一个浏览器登录不同账号数据覆盖问题解决方案

    vue同一个浏览器登录不同账号数据覆盖问题解决方案

    同一个浏览器登录不同账号session一致,这就导致后面登录的用户数据会把前面登录的用户数据覆盖掉,这个问题很常见,当前我这边解决的就是同一个浏览器不同窗口只能登录一个用户,对vue同一个浏览器登录不同账号数据覆盖问题解决方法感兴趣的朋友一起看看吧
    2024-01-01
  • 使用Vue构建可重用的分页组件

    使用Vue构建可重用的分页组件

    分页组件在web项目中是十分常见的组件,让我们使用Vue构建可重用的分页组件,关于基本结构和相关事件监听大家参考下本文
    2018-03-03
  • vue-drawer-layout实现手势滑出菜单栏

    vue-drawer-layout实现手势滑出菜单栏

    这篇文章主要为大家详细介绍了vue-drawer-layout实现手势滑出菜单栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • vue+echarts实现多条折线图

    vue+echarts实现多条折线图

    这篇文章主要为大家详细介绍了vue+echarts实现多条折线图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue路由History模式分析

    Vue路由History模式分析

    Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以启用history模式,本文将通过代码示例给大家详细分析Vue路由History模式
    2023-06-06
  • npm安装vue@cli报错的简单处理方式

    npm安装vue@cli报错的简单处理方式

    最近工作中遇到了报错,现在将解决的办法分享给大家,下面这篇文章主要给大家介绍了关于npm安装vue@cli报错的简单处理方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12

最新评论