前端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>
````
