前端html-docx实现html转word，并导出文件，文字+图片
qq_41737172 2024-09-07 15:33:01 阅读 97
前端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’);
<code><template>
<div class="container">code>
<breadCrumb></breadCrumb>
<section>
<wrapBox class="ar-box">code>
<div id="pcContract">code>
<div class="ar-title" style="text-align: center;font-size: 24px; font-weight: bold; line-height: 60px;">code>
<p>关于{ {alarm.monitorPoint.name}}限高架发生碰撞报警的报告</p>
</div>
<div class="sr-con">code>
<div class="ar-conbox">code>
<div class="ar-contit" style="font-size: 20px; font-weight: bold; line-height: 60px;">一、告警通知</div>code>
<div class="ar-context ml20" style="text-indent: 2em;margin: 10px 0;"> { {alarm.remark}} </div>code>
</div>
<div class="ar-conbox">code>
<div class="ar-contit" style="font-size: 20px; font-weight: bold; line-height: 60px;">二、监测数据</div>code>
<div class="mb10" style="font-size: 18px; font-weight: bold; line-height: 60px;margin-bottom: 20px ;">2.1code>
视频监测图片：</div>
<div class="ar-context">code>
<div class="ar-imgs" style="text-align: center;margin-bottom: 20px;">code>
<img class="ar-imgCss" :src="imgList[0]" width="600" />code>
<p>碰撞前</p>
</div>
<div class="ar-imgs" style="text-align: center;margin-bottom: 20px;">code>
<img class="ar-imgCss" :src="imgList[2]" width="600" />code>
<p>碰撞中</p>
</div>
<div class="ar-imgs" style="text-align: center;margin-bottom: 20px;">code>
<img class="ar-imgCss" :src="imgList[4]" width="600" />code>
<p>碰撞后</p>
</div>
</div>
</div>
</div>
<footer>
<p class="dateP" style="text-align: right;">{ {alarm.addTime | ymd3}}</p>code>
</footer>
</div>
<el-button type="primary" @click="download()">下载</el-button>code>
</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">code>
</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>code>
.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文档里，这样，没有网，也能看到图片
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。