前端html-docx实现html转word，并导出文件
前端web页面 有文字，有图片，保存web的css效果
使用工具：html-docx
官方网址：http://docs.asprain.cn/html-docx/readme.html
步骤：
1 npm install html-docx-js
npm install file-saver
import FileSaver from “file-saver”;
import htmlDocx from “html-docx-js/dist/html-docx”;
2 写html，写行内样式，word可显示效果；
设置图片宽度 width=‘XX’（不设置的话，图片显示宽高效果不理想）
3 导出的方法 var converted = htmlDocx.asBlob(content);
saveAs(converted, ‘test.docx’);
<template> <div class="container"> <breadCrumb></breadCrumb> <section> <wrapBox class="ar-box"> <div id="pcContract"> <div class="ar-title" style="text-align: center;font-size: 24px; font-weight: bold; line-height: 60px;"> <p>关于{{alarm.monitorPoint.name}}限高架发生碰撞报警的报告</p> </div> <div class="sr-con"> <div class="ar-conbox"> <div class="ar-contit" style="font-size: 20px; font-weight: bold; line-height: 60px;">一、告警通知</div> <div class="ar-context ml20" style="text-indent: 2em;margin: 10px 0;"> {{alarm.remark}} </div> </div> <div class="ar-conbox"> <div class="ar-contit" style="font-size: 20px; font-weight: bold; line-height: 60px;">二、监测数据</div> <div class="mb10" style="font-size: 18px; font-weight: bold; line-height: 60px;margin-bottom: 20px ;">2.1 视频监测图片：</div> <div class="ar-context"> <div class="ar-imgs" style="text-align: center;margin-bottom: 20px;"> <img class="ar-imgCss" :src="imgList[0]" width="600" /> <p>碰撞前</p> </div> <div class="ar-imgs" style="text-align: center;margin-bottom: 20px;"> <img class="ar-imgCss" :src="imgList[2]" width="600" /> <p>碰撞中</p> </div> <div class="ar-imgs" style="text-align: center;margin-bottom: 20px;"> <img class="ar-imgCss" :src="imgList[4]" width="600" /> <p>碰撞后</p> </div> </div> </div> </div> <footer> <p class="dateP" style="text-align: right;">{{alarm.addTime | ymd3}}</p> </footer> </div> <el-button type="primary" @click="download()">下载</el-button> </wrapBox> </section> </div> </template> <script> import alarmApi from '@/api/alarm/record' import deviceApi from '@/api/device/device' import ChartItem from "../Equipment/chartItem"; import FileSaver from "file-saver"; import htmlDocx from "html-docx-js/dist/html-docx"; export default { name: "", components: { ChartItem, }, data() { return { id: '', alarm: { monitorPoint: { name: '' } }, imgList: [], }; }, computed: { }, mounted() { this.init(); this.$nextTick(() => { }); }, methods: { init() { this.id = this.$route.params.id ? this.$route.params.id : ''; console.log(',', this.id) alarmApi.getDetail(this.id).then((res) => { if (res.flag) { this.alarm = res.object; this.getImg() } else { } }).catch(); }, getImg() { let data = { showProof: true, ids: [this.alarm.id] } alarmApi.getData(data).then((res) => { if (res.flag == 0) { let strImg = res.data[0].alarmLogProof[0].imageUrl; let splitImg = strImg ? strImg.split(",") : ''; this.imgList = splitImg } }) }, download() { let contentHtml = document.getElementById('pcContract').innerHTML; let content = ` <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div> ${contentHtml} </div> </body> </html> `; let converted = htmlDocx.asBlob(content); FileSaver.saveAs(converted, `关于${this.alarm.monitorPoint.name}限高架发生碰撞报警的报告.docx`); }, //over }, }; </script> <style lang="scss" scoped> .container { >section { padding: 20px; .detail { header { margin-bottom: 20px; h2 { font-size: 18px; color: $cyan2; } } section { display: flex; flex-direction: column; color: #859fce; .buttons { padding-left: 20px; .el-button { width: 100px; } } } } } } .ar-box { color: #fff; } .ar-conbox { margin-bottom: 20px; } .ar-title { text-align: center; font-size: 20px; } .ar-title p { margin-bottom: 10px; } .ar-contit { font-size: 18px; margin-bottom: 10px; } .ar-imgs { text-align: center; margin-bottom: 20px; } .ar-imgCss { width: 60%; } .ml20 { margin-left: 20px; } .mb10 { margin-bottom: 10px; } .dateP { text-align: right; } </style>
以上方法，有个问题，只有在有网络的情况下，图片才能显示，因为图片是在线地址，所以，docx的大小很小；后面一篇文章，将图片转成base64，把图片加载到docx文档里，这样，没有网，也能看到图片
