法一：html-docx-js file-saver
尽量保持原生标签；
建议书写行内样式，部分样式导出无效如flex,float；
html导出内容外面包一层（id子级层）
效果图：
import FileSaver from "file-saver"
import htmlDocx from "html-docx-js/dist/html-docx"
// 导出为word
exportDoc () {
let contentHtml = document.getElementById("fireDoc").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, "导出文档.docx");
},<div id="fireDoc">
<div style="width: 100%;padding: 10px;">
<div style="text-align:center;font-size: 28px;font-weight: bold;" @click="exportDoc">森林草原火灾应急预案</div>
<div style="text-align:center;font-size: 24px;font-weight: bold;">{{fireCode}}</div>
<div>
<div style="font-size: 24px;font-weight: bold;margin: 20px 0;">1. 火情基本信息</div>
<div style="line-height: 25px;"> 火情编号 ，_ __日_ __时_ __分，_ _接到___报告，_ __市_ __区_ __乡/镇__ _村 （小地名）发生火情。火场天气为_火情编号 ，_ __日_ __时_ __分，_ _接到___报告，_ __市_ __区_ __乡/镇__ _村 （小地名）发生火情。火场天气为_火情编号 ，_ __日_ __时_ __分，_ _接到___报告，_ __市_
__区_ __乡/镇__ _村
（小地名）发生火情。火场天气为_</div>
</div>
<div>
<div style="font-size: 24px;font-weight: bold;margin: 20px 0;">2. 主要任务</div>
<div style="font-size: 20px;font-weight: bold;margin: 10px 0;">2.1 组织灭火行动</div>
<div style="line-height: 25px;"> 科学运用各种手段扑打明火、开挖（设置）防火隔离带、清理火线、看守火场，严防次生灾害发生。</div>
<div style="font-size: 20px;font-weight: bold;margin: 10px 0;">2.2 解救疏散人员</div>
<div style="line-height: 25px;"> 组织解救、转移、疏散受威胁群众并及时妥善安置和开展必要的医疗救治。</div>
<div style="font-size: 20px;font-weight: bold;margin: 10px 0;">2.3 保护重要目标</div>
<div style="line-height: 25px;"> 保护民生和重要军事目标并确保重大危险源安全。</div>
<div style="font-size: 20px;font-weight: bold;margin: 10px 0;">2.4 转移重要物资</div>
<div style="line-height: 25px;"> 组织抢救、运送、转移重要物资。</div>
<div style="font-size: 20px;font-weight: bold;margin: 10px 0;">2.5 维护社会稳定</div>
<div style="line-height: 25px;"> 加强火灾发生地区及周边社会治安和公共安全工作，严密防范各类违法犯罪行为，加强重点目标守卫和治安巡逻，维护火灾发生地区及周边社会秩序稳定。</div>
</div>
<div>
<div style="font-size: 24px;font-weight: bold;margin: 20px 0;">3. 处置力量</div>
<!-- 3.1 -->
<div style="font-size: 20px;font-weight: bold;margin: 10px 0;">3.1 扑救力量</div>
<div style="line-height: 25px;"> 火场周边3公里范围内有15个森林消防队伍，分别是南口镇关沟中队、延庆区延庆一中队、延庆区延庆二中队、延庆镇森林消防队，康庄镇森林消防队、八达岭林场森林扑火队伍，
旧县镇森林消防队，松山林场森林扑火队伍、延庆区张山营中队、张山营镇森林消防队伍、沈家营乡森林消防队、大榆树森林消防中队、井庄镇森林消防中队。
</div>
<div>
<div style="height: 30px;text-align: center;font-weight: bold;">表1 火场周边森林消防队信息</div>
<table cellspacing='0'>
<tr style="background: #b2dcff;line-height: 40px;">
<td style="text-align:center;">序号</td>
<td style="text-align:center;">队伍名称</td>
<td style="text-align:center;">地址及经纬度</td>
<td style="text-align:center;">距火点距离(km)</td>
</tr>
<tr v-for="(item,index) in tablePower" :key="index" style="width: 100%;line-height: 40px;" :style="{'background': index%2==0?'#f6f9ff':'#e5f3ff'}">
<td style="width: 50px;text-align:center;">{{index+1}}</td>
<td style="width: 180px;text-align:center;">{{item.name}}</td>
<td style="width: 240px;text-align:center;"> {{item.address}}</td>
<td style="width: 120px;text-align:center;">{{item.distance}}</td>
</tr>
</table>
<div style="margin: 10px 0;line-height: 25px;">
应就地就近组织地方专业防扑火队伍、应急航空救援队伍、综合性消防救援队伍等力量参与扑救，力争将火灾扑灭在初起阶段。
必要时，组织协调当地解放军和武警部队等救援力量参与扑救。各扑火力量在火场前线指挥部的统一调度指挥下，明确任务分工，
落实扑救责任，科学组织扑救，在确保扑火人员安全情况下，迅速有序开展扑救工作，严防各类次生灾害发生。
</div>
</div>
<!-- 3.2 -->
<div style="font-size: 20px;font-weight: bold;margin: 10px 0;">3.2 防火设施</div>
<div style="line-height: 25px;"> 火场周边3公里范围内有1个蓄水池，分别是南口镇蓄水池；火场周边3公里范围内有2个摄像头，分别是金家坟摄像头、马家沟摄像头。</div>
<div>
<div style="height: 30px;text-align: center;font-weight: bold;">表2 火场周边防火设施信息</div>
<table cellspacing='0'>
<tr style="background: #b2dcff;line-height: 40px;">
<td style="text-align:center;">序号</td>
<td style="text-align:center;">设施类型</td>
<td style="text-align:center;">设施名称</td>
<td style="text-align:center;">地址及经纬度</td>
<td style="text-align:center;">距火点距离(km)</td>
</tr>
<tr v-for="(item,index) in tableFacilities" :key="index" style="width: 100%;line-height: 40px;" :style="{'background': index%2==0?'#f6f9ff':'#e5f3ff'}">
<td style="width: 50px;text-align:center;">{{index+1}}</td>
<td style="width: 80px;text-align:center;">{{item.type}}</td>
<td style="width: 100px;text-align:center;">{{item.name}}</td>
<td style="width: 240px;text-align:center;"> {{item.address}}</td>
<td style="width: 120px;text-align:center;">{{item.distance}}</td>
</tr>
</table>
</div>
<!-- 3.3 -->
<div style="font-size: 20px;font-weight: bold;margin: 10px 0;">3.3 重要保护目标</div>
<div style="line-height: 25px;"> 火场周边3公里范围内有1个学校，分别是南口镇小学；火场周边3公里范围内有2个加油站，分别是施惠达加油站、燕龙加油站。</div>
<div>
<div style="height: 30px;text-align: center;font-weight: bold;">表3 火场周边隐患点信息</div>
<table cellspacing='0'>
<tr style="background: #b2dcff;line-height: 40px;">
<td style="text-align:center;">序号</td>
<td style="text-align:center;">设施类型</td>
<td style="text-align:center;">设施名称</td>
<td style="text-align:center;">地址及经纬度</td>
<td style="text-align:center;">距火点距离(km)</td>
</tr>
<tr v-for="(item,index) in tableFacilities" :key="index" style="width: 100%;line-height: 40px;" :style="{'background': index%2==0?'#f6f9ff':'#e5f3ff'}">
<td style="width: 50px;text-align:center;">{{index+1}}</td>
<td style="width: 80px;text-align:center;">{{item.type}}</td>
<td style="width: 100px;text-align:center;">{{item.name}}</td>
<td style="width: 240px;text-align:center;"> {{item.address}}</td>
<td style="width: 120px;text-align:center;">{{item.distance}}</td>
</tr>
</table>
<div style="margin: 10px 0;line-height: 25px;">
当军事设施、核设施、危险化学品生产储存设施设备、油气管道、铁路线路等重要目标物和公共卫生、社会安全等重大危险源受到火灾威胁时，
迅速调集专业队伍，在专业人员指导并确保救援人员安全的前提下全力消除威胁，组织抢救、运送、转移重要物资，确保目标安全。
</div>
</div>
</div>
</div>
</div>法二：使用的是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>
扫一扫
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
