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

目录
  • 一、安装
  • 二、语法
  • 三、例子
    • 使用保存文字require()
    • 储存文字
    • 保存网址
    • 保存画布
    • 保存文件
  • 四、具体使用
  • 总结

一、安装

# 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导出文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue使用file-saver本地文件导出功能

    1:安装xlsx和file-saver npm install file-saver xlsx  --save 2:创建localExports.js文件 3:直接上代码 import XLSX from 'xlsx'; const FileSaver = require('file-saver'); import { getRandomNum } from '@/utils'; // 本地导出表格 /** * 导出Excel文件 * @param {*} elementName table组件

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

    目录 一.安装 二.语法 三.例子 使用保存文字require() 储存文字 保存网址 保存画布 保存文件 四.具体使用 总结 一.安装 # Basic Node.JS installation npm install file-saver --save bower install file-saver 此外,可以通过以下方式安装TypeScript定义: # Additional typescript definitions npm install @types/file-saver --sa

  • Spring中Xml属性配置的解析全过程记录

    1 工程概述 1.1 pom文件 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> <spring.ver

  • 在Java中实现二叉搜索树的全过程记录

    目录 二叉搜索树 有序符号表的 API 实现二叉搜索树 二叉搜索树类 查找 插入 最小/大的键 小于等于 key 的最大键/大于等于 key 的最小键 根据排名获得键 根据键获取排名 删除 总结 二叉搜索树 二叉搜索树结合了无序链表插入便捷和有序数组二分查找快速的特点,较为高效地实现了有序符号表.下图显示了二叉搜索树的结构特点(图片来自<算法第四版>): 可以看到每个父节点下都可以连着两个子节点,键写在节点上,其中左边的子节点的键小于父节点的键,右节点的键大于父节点的键.每个父节点及其后代节点

  • vue中使用input[type="file"]实现文件上传功能

    注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h

  • vue中实现图片压缩 file文件的方法

    项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法 将图片压缩的方法写到这个公用的js(api.js)中 //base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件) function dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].ma

  • VUE中使用TypeScript装饰器实现表单验证的全过程

    目录 前言 装饰器 class-validator 封装Validator 具体使用 小结 前言 最近接触了关于很多TypeScript装饰器的知识,以及class-validator这个用装饰器来做表单验证的包,就萌生了想在vue中使用装饰器来做表单验证的想法.class-validator允许我们在类上通过使用装饰器来完成表单的验证,并且可在浏览器端和node端同时使用.那么接下来先简单介绍一下装饰器和class-validator的用法. 装饰器 装饰器的语法十分简单,只需要在想使用的装饰

  • vue中七牛插件使用的实例代码

    本文介绍了vue中七牛插件使用,我也正在学习,分享给大家,顺便留个笔记,废话不说了,如下: <template> <div id="cxUpload" class="cx-upload"> <button id="pickfiles" class="uploadBtn">上传</button> </div> </template> <script&g

  • vue给input file绑定函数获取当前上传的对象完美实现方法

    HTML <input type="file" @change="tirggerFile($event)"> JS(vue-methods) tirggerFile : function (event) { var file = event.target.files; // (利用console.log输出看结构就知道如何处理档案资料) // do something... } 如果直接在绑定的函数中传入this,则不能正确获取,且不能获取到相关的inp

  • vue中使用cropperjs的方法

    用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结: 在使用之前,先引入: 在项目里,运行: npm install cropperjs -save 在template里: <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel">

  • 浅谈vue中.vue文件解析流程

    我们平时写的 .vue 文件称为 SFC(Single File Components),本文介绍将 SFC 解析为 descriptor 这一过程在 vue 中是如何执行的. vue 提供了一个 compiler.parseComponent(file, [options]) 方法,来将 .vue 文件解析成一个 descriptor: // an object format describing a single-file component. declare type SFCDescrip

随机推荐