使用的是jquery的插件export进行导出。
（安装所需报、配置webpack、创建jquery.word.export.js、页面引入）
1.首先安装FileSaver和jquery
npm install file-saver --save
npm install jquery --save
2.在项目 build 里的webpack.base.conf.js 里加载webpack文件，注意，要放在配置文件第一行；
const ?webpack = require('webpack')在webpack.base.conf.js中module.exports的最后加入：
plugins: [
?new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
?})
],3.我将jquery.word.export.js放在src的utils文件夹下，内容如下:
?
?jquery.word.export.js代码如下：
//导入js文件
import saveAs from "file-saver"
import $ from "jquery"
if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
(function() {
$.fn.wordExport = function(fileName,rules) {
fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
var static_ = {
mhtml: {
top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
body: "<body>_body_</body>"
}
};
var options = {
maxWidth: 624
};
// Clone selected element before manipulating it
var markup = $(this).clone();
// Remove hidden elements from the output
markup.each(function() {
var self = $(this);
if (self.is(':hidden'))
self.remove();
});
// Embed all images using Data URLs
var images = Array();
var img = markup.find('img');
for (var i = 0; i < img.length; i++) {
//如果导出的word文件里面包含线上的图片
// Calculate dimensions of output image
var width = Math.min(img[i].width, options.maxWidth);
var height = img[i].height * (width / img[i].width);
// Create canvas for converting image to data URL
//这是添加的代码--------------------------------------------
var img_id = "#"+img[i].id;
$('<canvas>').attr("id", "test_word_img_" + i).width(width).height(height).insertAfter(img_id);
/*
//如果导出的word文件里面包含本地图片用这一段，如果都包含，要另外研究一下
// Calculate dimensions of output image
var w = Math.min(img[i].width, options.maxWidth);
var h = img[i].height * (w / img[i].width);
// Create canvas for converting image to data URL
var canvas = document.createElement("CANVAS");
canvas.width = w;
canvas.height = h;
// Draw image to canvas
var context = canvas.getContext('2d');
context.drawImage(img[i], 0, 0, w, h);
// Get data URL encoding of image
var uri = canvas.toDataURL("image/png");
$(img[i]).attr("src", img[i].src);
img[i].width = w;
img[i].height = h;
// Save encoded image to array
images[i] = {
type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),
location: $(img[i]).attr("src"),
data: uri.substring(uri.indexOf(",") + 1)
};
*/
}
// Prepare bottom of mhtml file with image data
var mhtmlBottom = "\n";
for (var i = 0; i < images.length; i++) {
mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
mhtmlBottom += "Content-Location: " + images[i].location + "\n";
mhtmlBottom += "Content-Type: " + images[i].type + "\n";
mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n";
mhtmlBottom += images[i].data + "\n\n";
}
mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";
//TODO: load css from included stylesheet
var styles = rules;
// Aggregate parts of the file together
var fileContent = static_.mhtml.top.replace("_html_", static_.mhtml.head.replace("_styles_", styles) + static_.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom;
// Create a Blob with the file contents
var blob = new Blob([fileContent], {
type: "application/msword;charset=utf-8"
});
saveAs.saveAs(blob, fileName + ".doc");
};
})(jQuery);
} else {
if (typeof jQuery === "undefined") {
console.error("jQuery Word Export: missing dependency (jQuery)");
}
if (typeof saveAs === "undefined") {
console.error("jQuery Word Export: missing dependency (FileSaver.js)");
}
}4.页面文件如下 import $ from "jquery"，import wordExport from '@/utils/jquery.word.export'
（当时用elementui导出时，word页面布局不齐，所以又直接写了一次无框架的导出内容；页面通过控制显示隐藏进行显示，导出时加了一秒的定时器确保填写的内容导出）
<template>
<div class="describe">
<div class="describeContent" id="formDataInf">
<!-- <p class="title">瑞安市马尾松虫情预测报告</p>
<p style="font-size: 18px;">省中心预报点、瑞安市森防站：</p>
<p class="content"> 我点2021年越冬代松毛虫虫情发育进度调查于4月6日开始至5月10日结束，共调查35天。分别到桐浦镇二平村、后龙村、桐岭村、桐淀村及福家林场等地进行了野外实地调查采集越冬代老熟幼虫及结茧情况，并结合往年的经验及本期段的天气气温等情况进行综合分析确定，其详细预测预报数据如下：</p>
<p class="content"> 一、越冬代发育速度：因今年越冬代松毛虫出蛰高峰期比2020年同期相比8天左右，4月份气温（日平均气温）比2020年同期又高了1.2℃，因此，今年越冬代松毛虫老熟幼虫结茧进度会比往年相应提前及加快，如有虫情发生地段结茧高峰期与 2020年同期相比会提早10天左右，与往年持平，据推测将会于4月下旬至5月上旬时间段出现。</p>
<p class="content"> 二、越冬代茧期采集情况：由于标准地无虫，我点于5月2日、3日到野外实地采茧（约调查松材株树2000棵左右，无采集到）</p> -->
<p class="title">瑞安市虫情预测报告</p>
<!-- 导出页面 -->
<div v-show="isExport">
<p class="contentItem">
瑞安市虫情测报点共11个，检测时段为{{ruleForm.auditTime}},其详细数据统计如下：
</p>
<!-- 导出第一条 -->
<div class="contentItem">
1.监测时期内，11个测报点共诱捕害虫{{ruleForm.gbhhcNum}}只（其中松毛虫{{ruleForm.smcNum}}只,美国白蛾{{ruleForm.mgbeNum}}只,蛾蝶类{{ruleForm.edlNum}}只,金贵甲虫类
{{ruleForm.jgjcNum}}只）,非主测对象{{ruleForm.notMainObjNum}}只）,（天牛{{ruleForm.tnNum}}只）,其他{{ruleForm.qtNum}}只）,主测对象诱捕量与上一年同期相比{{ruleForm.mainCompare}}
了{{ruleForm.mainAddNum}}只（上一年同期主测对象诱捕量为{{ruleForm.mainLastYearNum}}只,非主测对象诱捕量为{{ruleForm.secondaryYbNum}}只,非主测对象{{ruleForm.secondaryAdd}}
的主要是{{ruleForm.addType}}类）。
</div>
<!-- 导出第二条 -->
<div class="contentItem">
2.天气气温情况：监测时间段累计积温为{{ruleForm.cumulativeTemp}}℃,日平均气温为{{ruleForm.averageTemp}}℃,与上一年同期相比{{ruleForm.compareHight}}{{ruleForm.compareHightNum}}
℃,（2021年同期积温{{ruleForm.eryiCumulativeTemp}}℃,日平均气温为{{ruleForm.eryiAverageTemp}}℃）,本月累计晴天{{ruleForm.sunnyDays}}天,（含阴天、雷雨天），雨天{{ruleForm.rainDays}}天。
</div>
<!-- 导出第三条 -->
<div class="contentItem">
3.危害程度：松毛虫发生期{{ruleForm.smcDate}},蚕蛹期有效虫口基数（发生量【虫口密度】）{{ruleForm.ckjsNum}}只/株,被害程度{{ruleForm.bhLevel}},其中中等{{ruleForm.bhMiddle}}
只/株,重度{{ruleForm.bhSevere}}只/株,发生面积{{ruleForm.bhareaNum}}亩,轻度{{ruleForm.areaMild}}亩,中等程度{{ruleForm.areaMiddle}}亩,重度{{ruleForm.areaSevere}}亩,
主要发生地点{{ruleForm.fsPlace}}【到村或小班】,虫情趋势{{ruleForm.cTrend}}【平稳/严峻】。
</div>
</div>
<!-- 修改页面 -->
<div v-show="!isExport">
<p class="contentItem">
<span>瑞安市虫情测报点共11个，检测时段为</span>
<span v-show="!isExport">
<el-date-picker
v-model="ruleForm.auditTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
@change="changeFormData">
</el-date-picker>
</span>
<span v-show="isExport">{{ruleForm.auditTime}}</span>
<span>,其详细数据统计如下：</span>
</p>
<!-- 第一条 -->
<div class="contentItem">
<span>1.监测时期内，11个测报点共诱捕害虫</span>
<span ><el-input v-model.number="ruleForm.gbhhcNum" placeholder="" class="oInput"></el-input></span>
<span>只（其中松毛虫</span>
<span ><el-input v-model.number="ruleForm.smcNum" placeholder="" class="oInput"></el-input></span>
<span>只,美国白蛾</span>
<span><el-input v-model.number="ruleForm.mgbeNum" placeholder="" class="oInput"></el-input></span>
<span>只,蛾蝶类</span>
<span><el-input v-model.number="ruleForm.edlNum" placeholder="" class="oInput"></el-input></span>
<span>只,金贵甲虫类</span>
<span><el-input v-model.number="ruleForm.jgjcNum" placeholder="" class="oInput"></el-input></span>
<span>只）,非主测对象</span>
<span><el-input v-model.number="ruleForm.notMainObjNum" placeholder="" class="oInput"></el-input></span>
<span>只）,（天牛</span>
<span><el-input v-model.number="ruleForm.tnNum" placeholder="" class="oInput"></el-input></span>
<span>只）,其他</span>
<span><el-input v-model.number="ruleForm.qtNum" placeholder="" class="oInput"></el-input></span>
<span>只）,主测对象诱捕量与上一年同期相比</span>
<span>
<el-select v-model="ruleForm.mainCompare" placeholder="增加" class="oInput oSelect">
<el-option
v-for="(item,index) in optionsZjjs"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</span>
<span>了</span>
<span><el-input v-model.number="ruleForm.mainAddNum" placeholder="" class="oInput"></el-input></span>
<span>只（上一年同期主测对象诱捕量为</span>
<span><el-input v-model="ruleForm.mainLastYearNum" placeholder="" class="oInput"></el-input></span>
<span>只,非主测对象诱捕量为</span>
<span><el-input v-model.number="ruleForm.secondaryYbNum" placeholder="" class="oInput"></el-input></span>
<span>只,非主测对象</span>
<span>
<el-select v-model="ruleForm.secondaryAdd" placeholder="增加" class="oInput oSelect">
<el-option
v-for="item in optionsZjjs2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</span>
<span>的主要是</span>
<span><el-input v-model="ruleForm.addType" placeholder="" class="oInput"></el-input></span>
<span>类）。</span>
</div>
<!-- 第二条 -->
<div class="contentItem">
<span>2.天气气温情况：监测时间段累计积温为</span>
<span><el-input v-model.number="ruleForm.cumulativeTemp" placeholder="" class="oInput"></el-input></span>
<span>℃,日平均气温为</span>
<span><el-input v-model="ruleForm.averageTemp" placeholder="" class="oInput"></el-input></span>
<span>℃,与上一年同期相比</span>
<span>
<el-select v-model="ruleForm.compareHight" placeholder="高低" class="oInput oSelect">
<el-option
v-for="item in optionsGd"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="ruleForm.compareHightNum" placeholder="" class="oInput"></el-input>
</span>
<span>℃,（2021年同期积温</span>
<span><el-input v-model="ruleForm.eryiCumulativeTemp" placeholder="" class="oInput"></el-input></span>
<span>℃,日平均气温为</span>
<span><el-input v-model="ruleForm.eryiAverageTemp" placeholder="" class="oInput"></el-input></span>
<span>℃）,本月累计晴天</span>
<span><el-input v-model="ruleForm.sunnyDays" placeholder="" class="oInput"></el-input></span>
<span>天,（含阴天、雷雨天），雨天</span>
<span><el-input v-model="ruleForm.rainDays" placeholder="" class="oInput"></el-input></span>
<span>天。</span>
</div>
<!-- 第三条 -->
<div class="contentItem">
<span>3.危害程度：松毛虫发生期</span>
<span>
<el-date-picker
v-model="ruleForm.smcDate"
type="date"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
</span>
<span>,蚕蛹期有效虫口基数（发生量【虫口密度】）</span>
<span><el-input v-model.number="ruleForm.ckjsNum" placeholder="" class="oInput"></el-input></span>
<span>只/株,被害程度</span>
<span>
<el-select v-model="ruleForm.bhLevel" placeholder="轻重" class="oInput oSelect">
<el-option
v-for="item in optionsQz"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</span>
<span>,其中中等</span>
<span><el-input v-model="ruleForm.bhMiddle" placeholder="" class="oInput"></el-input></span>
<span>只/株,重度</span>
<span><el-input v-model="ruleForm.bhSevere" placeholder="" class="oInput"></el-input></span>
<span>只/株,发生面积</span>
<span><el-input v-model.number="ruleForm.bhareaNum" placeholder="" class="oInput"></el-input></span>
<span>亩,轻度</span>
<span><el-input v-model="ruleForm.areaMild" placeholder="" class="oInput"></el-input></span>
<span>亩,中等程度</span>
<span><el-input v-model="ruleForm.areaMiddle" placeholder="" class="oInput"></el-input></span>
<span>亩,重度</span>
<span><el-input v-model="ruleForm.areaSevere" placeholder="" class="oInput"></el-input></span>
<span>亩,主要发生地点</span>
<span><el-input v-model="ruleForm.fsPlace" placeholder="" class="oInput"></el-input></span>
<span>【到村或小班】,虫情趋势</span>
<span><el-input v-model="ruleForm.cTrend" placeholder="" class="oInput"></el-input></span>
<span>【平稳/严峻】。</span>
</div>
</div>
</div>
<div class="contentItem">
<p class="btns">
<el-button type="primary" @click="editForm" :disabled="isExport">修改</el-button>
<el-button type="primary" @click="outPutForm">导出</el-button>
</p>
</div>
</div>
</template>
<script>
import $ from "jquery"
import wordExport from '@/utils/jquery.word.export'
export default {
data() {
return {
isExport: false,
ruleForm: {
auditTime: [], //观测日期
gbhhcNum: "",
smcNum: "",
mgbeNum: "",
edlNum: "",
jgjcNum: "",
notMainObjNum: "",
tnNum: "",
qtNum: "",
mainCompare: "",
mainAddNum: "",
mainLastYearNum: "",
secondaryYbNum: "",
secondaryAdd: "",
addType: "",
cumulativeTemp: "",
averageTemp: "",
compareHight: "",
compareHightNum: "",
eryiCumulativeTemp: "",
eryiAverageTemp: "",
sunnyDays: "",
rainDays: "",
smcDate: "",
ckjsNum: "",
bhLevel: "",
bhMiddle: "",
bhSevere: "",
bhareaNum: "",
areaMild: "",
areaMiddle: "",
areaSevere: "",
fsPlace: "",
cunOrxb: "",
cTrend: ""
},
rules: {
},
optionsZjjs: [{
value: '增加',
label: '增加'
}, {
value: '减少',
label: '减少'
}],
optionsZjjs2: [{
value: '增加',
label: '增加'
}, {
value: '减少',
label: '减少'
}],
optionsGd: [{
value: '高',
label: '高'
}, {
value: '低',
label: '低'
}],
optionsQz: [{
value: '轻',
label: '轻'
}, {
value: '重',
label: '重'
}]
};
},
created () {
this.ruleForm.auditTime = [this.formatTime(new Date(), 'Y-M-D'),this.formatTime(new Date(), 'Y-M-D')]
},
mounted() {
this.initFormData()
},
methods: {
// 初始化数据
initFormData () {
// http.initFormData({data: this.ruleForm.auditTime}).then(res => {
// })
},
// 日期区间改变
changeFormData () {
this.initFormData()
},
// 修改
editForm () {
// http.editFormDate({data: this.ruleForm}).then(res => {
// })
},
// 导出doc
outPutForm () {
this.isExport = true
setTimeout(() => {
$("#formDataInf").wordExport('虫情预测预报')
}, 1000);
}
}
}
</script>
<style lang="scss" scoped>
.describe{
width: 100%;
height: 100%;
background: #fff;
.describeContent{
// width: 1340px;
margin: 15px auto;
line-height: 50px;
padding: 20px;
.title{
color: #666666;
font-size: 36px;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.content{
color: #666666;
font-size: 16px;
}
}
}
// .demo-ruleForm{
// display: flex;
// justify-content: flex-start;
// .el-form-item{
// display: flex;
// justify-content: flex-start;
// flex-wrap: nowrap;
// }
// }
.contentItem{
font-size: 16px;
margin-top: 20px;
}
.oInput{
height: 20px;
width: 60px;
line-height: 20px;
}
.oSelect{
width: 80px;
}
.btns{
width: 150px;
margin-top: 50px;
display: flex;
justify-content: space-between;
margin-left: calc(100% - 250px);
}
</style>