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('接口报错')
      }
    })

总结

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

相关文章

  • 前端实现简单的sse封装方式(React hook Vue3)

    前端实现简单的sse封装方式(React hook Vue3)

    这篇文章主要介绍了前端实现简单的sse封装方式(React hook Vue3),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue自定义组件使用事件修饰符的踩坑记录

    Vue自定义组件使用事件修饰符的踩坑记录

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,下面这篇文章主要给大家介绍了关于Vue自定义组件使用事件修饰符的相关资料,需要的朋友可以参考下
    2021-05-05
  • Vue.js实现音乐播放器

    Vue.js实现音乐播放器

    这篇文章主要为大家详细介绍了Vue.js实现音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue注册模块与登录状态的持久化实现方法详解

    Vue注册模块与登录状态的持久化实现方法详解

    这篇文章主要介绍了Vue注册模块与登录状态的持久化实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue收集依赖与触发依赖源码刨析

    Vue收集依赖与触发依赖源码刨析

    vue对依赖的管理使用的是发布订阅者模式,其中watcher扮演订阅者,Dep扮演发布者。所以dep中会有多个watcher,一个订阅者也可以有多个发布者(依赖)。总共三个过程:定义依赖、收集依赖、触发依赖。下面开始详细讲解三个过程
    2022-10-10
  • Vue3 Transition组件给页面切换并加上动画效果

    Vue3 Transition组件给页面切换并加上动画效果

    这篇文章主要给大家介绍了关于Vue3 Transition组件给页面切换并加上动画效果的相关资料,vue的过渡动画主要是transition标签的使用,配合css动画实现的,需要的朋友可以参考下
    2023-06-06
  • 用vue的双向绑定简单实现一个todo-list的示例代码

    用vue的双向绑定简单实现一个todo-list的示例代码

    本篇文章主要介绍了用vue的双向绑定简单实现一个todo的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue3+ts+Vuex中使用websocket协议方式

    vue3+ts+Vuex中使用websocket协议方式

    这篇文章主要介绍了vue3+ts+Vuex中使用websocket协议方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Nuxt的动态路由和参数校验操作

    Nuxt的动态路由和参数校验操作

    这篇文章主要介绍了Nuxt的动态路由和参数校验操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue中Axios的封装与接口管理详解

    Vue中Axios的封装与接口管理详解

    在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中,下面这篇文章主要给大家介绍了关于Vue中Axios的封装与接口管理的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论