vue中使用file-saver导出文件

一、安装
npm install file-saver --save
二使用

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只会使用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类型input标签，无法使用reset方法清空已经选择的文件【简单粗暴的解决方案】
这是在一个vue+springboot的小项目中遇到的问题,如图: 看了其他大佬的文章,看到了不少解决方案,但是无济于事,我这里依然报错,我一不做二不休直接提供一个是十分暴力的解决方案下面这个是两 ...
vue中使用file-saver插件导出文件（表格，图片，word文档等）
1. 安装 js安装 npm install file-saver --save ts安装 npm install @types/file-saver --save-dev 2.引入 import { ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
vue中通过post方式异步上传文件
功能需求: 根据后台接口需求,需通过异步的方式post提交上传文件,并根据返回的信息作出相应的提示.页面已提前写好了,如下: 思路分析: 1.创建一个FormData空对象,然后使用append方法添 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
如何在Vue 中管理 Mixins（搞懂这两点就足够了）
转载地址:https://segmentfault.com/a/1190000021772893 当我们的Vue项目功能越来越多时,如果有类似的组件,可能会发现自己一次又一次地复制和粘贴相同的数据.方 ...
Vue中数组变动监听
Vue中数组变动监听 Vue的通过数据劫持的方式实现数据的双向绑定,即使用Object.defineProperty()来实现对属性的劫持,但是Object.defineProperty()中的set ...

vue中使用file-saver导出文件

vue中使用file-saver导出文件相关推荐

最新文章

热门文章