vue使用file-saver插件保存各种格式文件方式

 更新时间:2024年07月01日 14:31:38   作者:Mr__proto__  
这篇文章主要介绍了vue使用file-saver插件保存各种格式文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

使用file-saver插件保存各种格式文件方式

首先下载插件file-saver

npm install file-saver 

再封装组件

import FileSaver from "file-saver";
export default class fileSave {
    /**
     * 导出Excel文件
     * @param {*} res   文件流
     * @param {*} name  文件名
     */
    static getExcel(res, name) {
        console.log(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`);
    }
}

vue导出文件(file-saver,vue2,vue3)

安装插件

npm install file-saver --save
// 如使用ts,安装file-saver的typeScript类型定义
npm install @types/file-saver --save-dev

导出的格式类型参考

文件后缀Type
.pdfapplication/pdf
.docapplication/msword
.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
.xlsapplication/vnd.ms-excel
.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.pptapplication/vnd.ms-powerpoint
.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation

基本使用

代码如下:

import { saveAs } from 'file-saver'

导出(下载文件):

//⚠️注意:需要配置你需要导出的文件类型
const blob = new Blob(['文件内容'], 
{ type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})

saveAs(blob,'导出的文件名字')

案例

import axios from 'axios'
import { saveAs } from 'file-saver'
 axios({
      method: 'get',
      url: url,
      responseType: 'blob',
      //注入token流,需要添加不需要则无需添加。
      headers: { 'Authorization': 'Bearer ' + getToken() }
    }).then(async (res) => {
        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-            
        officedocument.wordprocessingml.document' })
        saveAs(blob, name)
      } else {
        console.log('接口报错')
      }
    })

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于在vue-cli中使用微信自动登录和分享的实例

    关于在vue-cli中使用微信自动登录和分享的实例

    本篇文章主要介绍了关于在vue-cli中使用微信自动登录和分享的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 复刻画龙产品vue实现新春气泡兔

    复刻画龙产品vue实现新春气泡兔

    这篇文章主要为大家介绍了复刻画龙产品之使用vue实现新春气泡兔示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • antdv的table因数据量过大导致的卡顿问题及解决

    antdv的table因数据量过大导致的卡顿问题及解决

    这篇文章主要介绍了antdv的table因数据量过大导致的卡顿问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 基于vue3 vue-cli4 线上部署及优化的问题

    基于vue3 vue-cli4 线上部署及优化的问题

    这篇文章主要介绍了基于vue3 vue-cli4 线上部署及优化的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue实现条件叠加搜索的解决方法

    vue实现条件叠加搜索的解决方法

    这篇文章主要为大家详细介绍了vue实现条件叠加搜索的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue实现条件判断动态绑定样式的方法

    vue实现条件判断动态绑定样式的方法

    今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue.js指令v-for使用以及下标索引的获取

    vue.js指令v-for使用以及下标索引的获取

    今天小编就为大家分享一篇关于vue.js指令v-for使用以及下标索引的获取,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue实现定时刷新数据,每隔5分钟执行一次

    vue实现定时刷新数据,每隔5分钟执行一次

    这篇文章主要介绍了vue实现定时刷新数据,每隔5分钟执行一次问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 关于应用UI组件的移动端适配方式

    关于应用UI组件的移动端适配方式

    这篇文章主要介绍了关于应用UI组件的移动端适配方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue组件之全局注册和局部注册方式

    vue组件之全局注册和局部注册方式

    这篇文章主要介绍了vue组件之全局注册和局部注册方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论