vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本

vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本

1、基本介绍

npm地址：file-saver - npm

 2、安装

# Basic Node.JS installation
npm install file-saver --save
bower install file-saver

# Additional typescript definitions
npm install @types/file-saver --save-dev

3、示例

使用保存文字 require()

let FileSaver = require('file-saver');
let blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

储存文字 

let 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]。

保存画布

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

 注意：标准HTML5 canvas.toBlob()方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器canvas.toBlob()，可以对此进行填充。

保存文件

// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
let file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);

 实例1

在文件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`);
    }
}

使用：

import exportFile from '@/utils/exportFile' // 导入

exportFile.getExcel(res.data, '下载文件名称')  // 使用

实例2

npm install file-saver --save
# 如使用TS开发，可安装file-saver的TypeScript类型定义
npm install @types/file-saver --save-dev

使用

import { saveAs } from 'file-saver'  // 导入 saveAs

// 1、保存文本
const blob = new Blob(['Hello, world!'])
saveAs(blob, 'hello world.txt')

// 2、预览图片--打开新窗口预览文件（pdf、img）
saveAs('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

// 3、保存文件
const blob = new Blob([fileStream])		// fileStream 是文件流，一般从后台获取
saveAs(blob, fileName)					// fileName 保存文件的名称，需要带后缀

下载本地文件

	// file.js 封装下载本地文件方法
	import axios from 'axios'
	import { saveAs } from 'file-saver'
	/**
	 * @params {string} localFileName 本地文件名称
	 * @params {string} saveFileName 下载的文件名称
	 * @retuen {promise}
	 */
	export const downloadLocalFile = (localFileName, saveFileName) => {
	    return new Promise((resolve, reject) => {
	        axios({
	            url: `/file/${localFileName}`,	// 本地文件夹路径+本地文件名称(若资源在服务器，且是具体的路径，这里可改成该资源路径，此时封装的方法需要微调，入参的localFileName改成资源路径resource)
	            method: 'get',					
	            responseType: 'blob',			//	arraybuffer	也可
	        }).then(res => {
	            const blob = new Blob([res.data])
	            if (navigator.msSaveBlob) {			// 兼容IE
	                navigator.msSaveBlob(blob, saveFileName)
	            } else {
	                const url = window.URL.createObjectURL(blob)
	                saveAs(url, saveFileName)
	            }
	            resolve()
	        }).catch(err => {
	        	// 这里可以统一处理错误，比如"未找到相关文件"，"下载失败"等
	        	if (err.message === 'Request failed with status code 404') {
	        		// 提示or弹框：未找到相关文件
	        	} else {
	        		// 提示or弹框：下载失败
	        	}
	            reject(err)
	        })
	    })
	}

	// 使用（注意文件格式的后缀名）
	downloadLocalFile('excelFile.xlsx', 'newExcelFile.xlsx').then(res => {
		// 下载成功后的操作
		console.log('下载成功！')
	})

下载服务器文件（服务器返回文件流）

import { saveAs } from 'file-saver'
import axios from 'axios'
import { Message } from 'element-ui'
/**
   * @params {stream} fileStream 服务器返回的文件流
   * @params {string} saveFileName 下载的文件名称
   * @retuen {promise}
   */
export const downloadFile = (fileStream, saveFileName) => {
  return new Promise((resolve, reject) => {
    const blob = new Blob([fileStream], {
      type: fileStream.type
    })
    const URL = window.URL || window.webkitURL
    if (navigator.msSaveBlob) { // 兼容IE
      navigator.msSaveBlob(blob, saveFileName)
    } else {
      const url = URL.createObjectURL(blob)
      saveAs(url, saveFileName)
      url && URL.revokeObjectURL(url)
    }
    resolve()
  })
}
/**
 *
 * url 下载地址
 */
export const downFile = (url) => {
  const str1 = url.substr(0, 1)
  let pathN = ''
  if (str1 === '/') {
    pathN = url
  } else {
    pathN = '/' + url
  }
  const strs = pathN.split('/')
  let filename = '' // 下载文件名
  for (let i = 0; i < strs.length; i++) {
    if (i === strs.length - 1) {
      filename = strs[i]
    }
  }
  axios({
    url,
    method: 'get',
    responseType: 'blob'
  })
    .then((res) => {
      downloadFile(res.data, filename)
      Message({
        message: '下载成功',
        type: 'success',
        duration: 5 * 1000
      })
    })
    .catch(err => {
      // 这里可以统一处理错误，比如"未找到相关文件"，"下载失败"等
      if (err.message === 'Request failed with status code 404') {
        // 提示or弹框：未找到相关文件
        Message({
          // message: error.message,
          message: '未找到相关文件',
          type: 'error',
          duration: 5 * 1000
        })
      } else {
        // 提示or弹框：下载失败
        Message({
          // message: error.message,
          message: '下载失败',
          type: 'error',
          duration: 5 * 1000
        })
      }
    })
}