1、安装插件
cnpm install html-docx-js -S
cnpm install file-saver -S
2、模板
<template>
<div class="info-box">
<section id="pia" style="padding: 20px;">
<div class="info-title">2022年07月18日易涝点积水报告</div>
<div class="info-tips">报告时间：2022-07-19 07:00:00</div>
<div>
2022年07月18日，xx区大面积降雨，致使1处易涝点积水。现将当日处置情况汇报如下:
</div>
<div class="list-box" v-for="item in 1" :key="item">
<div class="list-top">
<span class="red-txt road-span">xx易涝点：</span>
<span class="span-item">日降雨量：<span class="red-txt">100mm</span></span>
<span class="span-item">当日最大雨量：<span class="red-txt">90mm</span></span>
<span class="span-item">当日最小雨量：<span class="red-txt">20mm</span></span>
</div>
<section class="clcs-list-box">
<div class="clcs-list-item">
<div class="clcs-list-item-div">处理时间：<span class="red-txt">2022-07-18 08:50:00</span></div>
<div class="clcs-list-item-div">处理单位：<span class="red-txt">xxx有限公司</span></div>
</div>
<div class="clcs-list-item">
<div class="clcs-list-item-div" style="width: 80%">处置措施：<span class="red-txt">接雨情警报后，我单位工作人员立即到达现场，先行采取清理疏通排水设施，利用排水泵将路面积水排出，同时派专职人员值守，消除隐患。</span></div>
</div>
<div class="clcs-list-item">
<div class="red-txt" style="margin-bottom: 5px;color:#515a6e">现场图片：</div>
<div>
<div v-for="(it,index) in img" :key="index" style="width: 250px;height: 150px;
margin-right: 10px;display: inline-block;overflow: hidden">
<el-image
style="width: 100%;height: 100%"
:src="it.url"
:preview-src-list="srcList">
</el-image>
</div>
</div>
</div>
</section>
</div>
</section>
<div class="footer-down-btn">
<div class="btn-down" @click="exportWord">下载word</div>
<div class="btn-down" >下载pdf</div>
</div>
</div>
</template>
<script>
import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx"; //导出word
import global_msg from "@/scripts/global";
export default {
name: "reportInfo",
data(){
return{
img:[
{id:2,url:require('@/assets/systems_images/gis/jjl_002.png')},
{id:1,url:require('@/assets/systems_images/gis/jjl_001.png')},
],
srcList:[
require('@/assets/systems_images/gis/jjl_002.png'),
require('@/assets/systems_images/gis/jjl_001.png'),
]
}
},
mounted() {
},
methods: {
back() {
this.$emit('back')
},
//导出word文件
exportWord() {
let that = this;
global_msg.waitForPrompt = that.$loading({
lock: true,
text: '文件下载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
let name = '积水报告'
setTimeout(function () {
var html = document.getElementById('pia').innerHTML;
//将图片转base64,这样word就能显示图片信息了
var imgReg = /<img.*?(?:>|\/>)/gi;
var srcReg = /src=[\'\"\s]?([^\'\"]*)[\'\"\s]?/i;
var matchs = html.match(imgReg);
for (var i = 0; i< matchs.length; ++i) {
var match = matchs[i];
var src = match.match(srcReg);
if (src && src[1]) {
var imgSrc = src[1];
var image = new Image();
image.src = imgSrc;
var canvas = document.createElement('canvas');
// canvas.width = image.width;
// canvas.height = image.height;
canvas.width = 250;//自定义图片宽高-----（由于图片本身分辨率较大，导致无法加载。所以自定义一个比较小的值）
canvas.height = 150;
var ctx = canvas.getContext('2d');
// ctx.drawImage(image, 0, 0);
ctx.drawImage(image, 0, 0, 250, 150)
var base64Url = canvas.toDataURL('image/jpeg', 1.0);
html = html.replace(match, `<img src="${base64Url}" />` );
}
}
//将图片转base64------END----------
let contentHtml = html;
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, name + ".docx");
global_msg.waitForPrompt.close()
},1200)
},
}
}
</script>
<style scoped>
.info-title{
font-size: 18px;
font-weight: 600;
text-align: center;
color: black;
}
.info-tips{
text-align: right;
margin: 20px 0;
color: #7c7c7c;
}
.info-box{
padding: 20px;
}
.span-item{
margin-left: 10px;
}
.red-txt{
color: #313131;
}
.clcs-list-item{
width: 100%;
margin-bottom: 8px;
}
.clcs-list-item-div{
width: 50%;
text-align: left;
display: inline-block;
}
.list-top{
margin: 20px 0;
}
.footer-down-btn{
text-align: center;
margin-top: 10px;
position: fixed;
bottom: 40px;
left: 50%;
/* width: calc(100% - 240px); */
/* left: 0; */
/* width: 100%;*/
}
.btn-down{
width: 75px;
height: 35px;
background: #2196F3;
text-align: center;
line-height: 35px;
border-radius: 5px;
display: inline-block;
margin-right: 15px;
color: white;
cursor: pointer;
}
.road-span{
font-size: 16px;
font-weight: 600;
}
</style>
3、自定义 scripts/global.js 文件
const waitForPrompt = null;
export default {
waitForPrompt, //等待提示
}
