2024年Web前端最全vue中使用file-saver导出文件_vue file-saver，成体系化的神级前端进阶笔记

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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");
    }

    /**
**读者福利**

========

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

> **由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）**
> ![](https://img-blog.csdnimg.cn/20201126205036657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)
> ![](https://img-blog.csdnimg.cn/20201126205047777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)
> ![](https://img-blog.csdnimg.cn/20201126205051391.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)



-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)