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'

//--------=== 20200618在上線中==--------//

　　突然想到這個還沒寫完,暫時這樣.因為后端有模板生成返回給前端比較方便

　　估計今天可以早下班了,哈哈哈,現在是 0:27分. 像是上學的時候在寫日記.哈哈哈.