文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

nodejs+vue如何实现在客户端导出word文档

2024-04-02 19:55

关注

小编给大家分享一下nodejs+vue如何实现在客户端导出word文档,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

问题

node.js上面这两篇文章已经讲的很不错了,但是我在实现的过程中还是出现了一个问题:我在后端能生成一个完整的word文档,但是在返回前端下载的时候遇到了问题。一开始我一直都以为node.js后台方面的代码导致的,毕竟我是第一次写嘛^_^,但是在不断的测试中我发现:

1、点击按钮用vue里面的axios请求localhost:8081/order/getDoc没有直接生成word文档,把返回的数据console.log(res)出来查看,发现得到的数据是一堆的乱码的字符串

2、但是在浏览器地址栏中请求同样的后端接口,发现能生成一个整个的word文档!

nodejs+vue如何实现在客户端导出word文档

问题根源

有了头绪我就开始上网搜寻,我发现,ajax的接受类型只能是string字符串,不是流类型,所以无法实现文件下载。ajax方式请求的数据只能存放在javascipt内存空间,可以通过javascript访问,但是无法保存到硬盘,因为javascript不能直接和硬盘交互,否则将是一个安全问题。

axios是第一个第三方的ajax库,所以同理。

解决方法

解决的方法我参考了一篇文章前端axios下载excel(二进制) https://www.jb51.net/article/144771.htm

解决方法:利用了blob对象,Blob对象可以看做是存放二进制数据的容器,它是一个二进制大对象,是一个可以存储二进制文件的容器。

methods:{
  handleClick(row){
  console.log(row);
  var orderId = row.orderId + row.oid.toString();
  console.log(orderId);
  this.$ajax({
  method:"get",
  url:"http://localhost:8081/order/getDoc",
  responseType:'blob'
  }).then((res)=>{
  //这里res.data是返回的blob对象
  var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
  var downloadElement = document.createElement('a');
  var href = window.URL.createObjectURL(blob); //创建下载的链接
  downloadElement.href = href;
  downloadElement.download = orderId+'.docx'; //下载后文件名
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载
  document.body.removeChild(downloadElement); //下载完成移除元素
  window.URL.revokeObjectURL(href); //释放掉blob对象
  })
  }
 }

nodejs+vue如何实现在客户端导出word文档

以上是“nodejs+vue如何实现在客户端导出word文档”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯