vue实现word,pdf文件的导出功能

 更新时间:2018年07月31日 10:19:21   作者:晏紫苏_cc  
这篇文章给大家介绍了vue实现word或pdf文档导出的功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下:

import axios from 'axios';
    axios.get(`url`, { //url: 接口地址
responseType: `arraybuffer` //一定要写
})
.then(res => {
if(res.status == 200){
let blob = new Blob([res.data], {
type: `application/msword` //word文档为msword,pdf文档为pdf
});
let objectUrl = URL.createObjectURL(blob);
let link = document.createElement("a");
let fname = `我的文档`; //下载文件的名字
link.href = objectUrl;
link.setAttribute("download", fname);
document.body.appendChild(link);
link.click();
}else {
this.$message({
type: "error",
message: "导出失败"
})
}
});

后端返回的文档流的格式:

PDF格式:

word格式:

总结

以上所述是小编给大家介绍的vue实现word,pdf文件的导出功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue3实现页面截图功能示例详解

    vue3实现页面截图功能示例详解

    在Vue3项目中实现页面截图的功能,可以通过使用js-web-screen-shot组件来实现,本文以toolbox.js作为案例,详细介绍了如何在Vue3框架下,利用js-web-screen-shot组件实现页面截图的具体步骤和方法,这一技术的应用,不仅可以提高用户体验,还能在需要时方便地获取页面的即时信息
    2024-10-10
  • vue使用axios时关于this的指向问题详解

    vue使用axios时关于this的指向问题详解

    最近在学习使用vue+axios,在使用中发现了一个问题,下面总结分享给大家,这篇文章主要给大家介绍了关于vue使用axios时this的指向问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-12-12
  • vue中如何实现拖拽调整顺序功能

    vue中如何实现拖拽调整顺序功能

    这篇文章主要介绍了vue中如何实现拖拽调整顺序功能问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue3中$refs的基本使用方法

    vue3中$refs的基本使用方法

    在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现,下面这篇文章主要给大家介绍了关于vue3中$refs的基本使用方法,需要的朋友可以参考下
    2022-03-03
  • vue element后台鉴权流程分析

    vue element后台鉴权流程分析

    这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • Vue3 pinia管理数据的3种方式代码

    Vue3 pinia管理数据的3种方式代码

    在Vue3中Pinia是一个状态管理库,它提供了一种简单而强大的方式来管理应用程序的状态,这篇文章主要给大家介绍了关于Vue3 pinia管理数据的3种方式,需要的朋友可以参考下
    2024-04-04
  • vue-admin-template框架搭建及应用小结

    vue-admin-template框架搭建及应用小结

     vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板(最少精简版),可作为模板进行二次开发,这篇文章主要介绍了vue-admin-template框架搭建及应用,需要的朋友可以参考下
    2023-05-05
  • 详解vue 不同环境配置不同的打包命令

    详解vue 不同环境配置不同的打包命令

    这篇文章主要介绍了详解vue不同环境配置不同的打包命令,主要包括正式环境、测试环境和开发环境,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue3中el-table表格数据不显示的原因和解决方法

    Vue3中el-table表格数据不显示的原因和解决方法

    这篇文章主要给大家介绍了Vue3中el-table表格数据不显示的原因和解决方法,文中有详细的代码示例供大家参考,如果有遇到相同问题的朋友可以参考阅读本文,希望能够帮到您
    2023-11-11
  • Vue中foreach数组与js中遍历数组的写法说明

    Vue中foreach数组与js中遍历数组的写法说明

    这篇文章主要介绍了Vue中foreach数组与js中遍历数组的写法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06

最新评论