nodejs(officegen)+vue(axios)在客户端导出word文档的方法

前言

我的项目中有一个需求：点击按钮生成可编辑的word文档订单详情的信息

我使用的前端框架是Vue.js、后台使用的是node.js

node.js生成和导出word文档我参考的是下面这两篇文章，写的挺好的（github上的那篇里面还有node.js生成word、excel、ppt的example，需要详细的可以看里面）

https://www.jb51.net/article/144769.htm

https://github.com/Ziv-Barber...

问题

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

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

2、但是在浏览器地址栏中请求同样的后端接口，发现能生成一个整个的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(officegen)+vue(axios)在客户端导出word文档的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue导出页面为PDF格式的实现思路

    通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..看了他们的文章,做了如下整理.. 说起来很容易,那么具体怎么实现呢? 1 .我们要添加两个模块 第一个.将页面html转换成图片 npm install --save html2canvas 第二个.将图片生成pdf npm install jspdf --save 2.定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/h

  • 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/

  • vue导出html、word和pdf的实现代码

    vue导出html、word和pdf的实现代码

    导出的页面组件如下: <template> <div id="resumeId"> <resumeHtml ref="resume" @on-download="download"/> </div> </template> 1.导出html 方法: 1)获取要导出的组件页面的css把它设置成js变量一文本并通过export导出 2)获取要导出组件页面的html的dom标签代码,通过thi

  • nodejs(officegen)+vue(axios)在客户端导出word文档的方法

    nodejs(officegen)+vue(axios)在客户端导出word文档的方法

    前言 我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息 我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写的挺好的(github上的那篇里面还有node.js生成word.excel.ppt的example,需要详细的可以看里面) https://www.jb51.net/article/144769.htm https://github.com/Ziv-Barber... 问题 node.js上面这两

  • C#导出文本内容到word文档的方法

    本文实例讲述了C#导出文本内容到word文档的方法.分享给大家供大家参考.具体实现方法如下: <%@ Page Language="C#" AutoEventWireup="true" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { Repeater1.DataSource = new String[] {

  • Java SpringBoot集成文件之如何使用POI导出Word文档

    Java SpringBoot集成文件之如何使用POI导出Word文档

    目录 前言 知识准备 什么是POI 实现案例 Pom依赖 导出Word 前言 通过Apache POI导出excel,而Apache POI包含是操作Office Open XML(OOXML)标准和微软的OLE 2复合文档格式(OLE2)的Java API.所以也是可以通过POI来导出word的.本文主要介绍通过SpringBoot集成POI工具实现Word的导出功能. 知识准备 需要理解Apache POI遵循的标准(Office Open XML(OOXML)标准和微软的OLE 2复合文档

  • Python实现自动化处理Word文档的方法详解

    Python实现自动化处理Word文档的方法详解

    目录 1. 批量生成Word文档 2. 将Word文档批量转换成PDF 3. 在Word文档中批量标记关键词 4. 在Word文档中批量替换关键词 使用Python实现Word文档的自动化处理,包括批量生成Word文档.在Word文档中批量进行查找和替换.将Word文档批量转换成PDF等. 1. 批量生成Word文档 安装openpyxl模块 pip install openpyxl 安装python-docx模块 pip install python-docx openpyxl模块可以读写扩展

  • PHP读取word文档的方法分析【基于COM组件】

    本文实例讲述了PHP读取word文档的方法.分享给大家供大家参考,具体如下: php开发 过程中可能会word文档的读取问题,这里可以利用com组件来完成此项操作 一.先开启php.ini的COM,操作如下 1. extension=php_com_dotnet.dll 2. com.allow_dcom = true 二.开启之后就可以试下如下操作 1.建立一个指向新COM组件的索引 $word = new COM("word.application") or die("C

  • PHP创建word文档的方法(平台无关)

    本文实例讲述了PHP创建word文档的方法.分享给大家供大家参考,具体如下: 关于用PHP生成word,在网上找了很多资料,有调用COM组件生成的,有安装PHP扩展生成的.都不免麻烦,以下为比较简洁的一种方法,且可跨平台. 以下为详细代码: class.word.php <?php class Word{ function start(){ ob_start(); //打开输出控制缓冲 echo '<html xmlns:o="urn:schemas-microsoft-com:of

  • python读取word文档的方法

    本文实例讲述了python读取word文档的方法.分享给大家供大家参考.具体如下: 首先下载安装win32com from win32com import client as wc word = wc.Dispatch('Word.Application') doc = word.Documents.Open('c:/test') doc.SaveAs('c:/test.text', 2) doc.Close() word.Quit() 这种方式产生的text文档,不能用python用普通的r方

  • C#实现通过模板自动创建Word文档的方法

    本文实例讲述了C#实现通过模板自动创建Word文档的方法,是非常实用的技巧.分享给大家供大家参考.具体实现方法如下: 引言:前段时间有项目要用c#生成Word格式的计算报告,通过网络查找到很多内容,但是都很凌乱,于是自己决定将具体的步骤总结整理出来,以便于更好的交流和以后相似问题可以迅速的解决! 现通过具体的示例演示具体的步骤:   第一步,制作模板   1.新建一个文档,设置文档内容. 2.在相应位置插入书签:将鼠标定位到要插入书签的位置,点击"插入">"书签&quo

  • C#实现合并多个word文档的方法

    本文实例讲述了C#实现合并多个word文档的方法,是非常具有实用价值的技巧.分享给大家供大家参考. 具体实现方法如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.Office.Interop.Word; using System.Reflection; using System.IO; using System.Diagnostics;

  • C#实现简单合并word文档的方法

    本文实例讲述了C#实现简单合并word文档的方法.分享给大家供大家参考.具体如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.Reflection; namespace Demo { p

随机推荐