Vue 前端下载 word 和 后端返回 数据流下载word

前不久做了一个下载数据导出word的功能.

刚开始也是迷了,...........好吧,言归正传.

先说后端反数据流的操作

1 后端要的是form的格式,所以在请求的时候转换一下格式 .

　　请求的时候

　　return axios({

　　　　url:"xxxxxxxxxx你的地址",

　　　　method:'post',

　　　　data:obj,

　　　   responseType:'blob',  ////----------重点 重点重点 是blob

　　　　headers:{' Content-Type': 'application/x-www-form-urlencoded '} /////--------------------规定发送的格式--

　　})

　　前端接受的时候　　

　　　　let blob = new Blob([res],{ type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8' });   //规定文件类型 res就是返回你的数据流了

              let link = document.createElement('a');

              // link.download = fileName//a标签添加属性

              let objectUrl = URL.createObjectURL(blob);

              link.setAttribute("href",objectUrl);

              link.setAttribute("download",xxxxx合同.docx'); 

              link.click();

              //释放内存

              window.URL.revokeObjectURL(link.href)

 

　　以上就是后端返回数据流前端接受下载了

---------------------------------------------------------------------------------------------------------分割线------------------------------------------------------------------------------------------------

 

  2. 前端弄word下载表格

　　首先 咔咔一顿安装   

　　　　-- 安装 docxtemplater     
　　　　cnpm install docxtemplater pizzip  --save

　　　　-- 安装 jszip-utils
　　　　cnpm install jszip-utils --save 

　　　　-- 安装 jszip
　　　　cnpm install jszip --save

　　　　-- 安装 FileSaver
　　　　cnpm install file-saver --save

　　//---------咔咔一顿引入------------

　　　　import docxtemplater from 'docxtemplater'
    　　import PizZip from 'pizzip' 　　import JSZipUtils from 'jszip-utils' 　　import {saveAs} from 'file-saver'