富文本编辑器的使用2——Tinymce编辑器+导出Word

Tinymce富文本编辑器在Vue中的使用与导出1、前言Tinymce编辑器功能强大，工具栏多样，修改属性更接近于Word，样式美观，可对编辑器里面内容进行编辑、保存并导出。对Tinymce编辑器支持导入word请看这篇文章Tinymce富文本编辑器的改进：支持导入word。实现效果如下：2、npm安装依赖@tinymce/tinymce-vue：tinymce官方提供了一个vue的组件tinym

weixin_43259189

3174人浏览 · 2023-11-24 09:42:09

weixin_43259189 · 2023-11-24 09:42:09 发布

Tinymce富文本编辑器在Vue中的使用与导出

1、前言

Tinymce编辑器功能强大，工具栏多样，修改属性更接近于Word，样式美观，可对编辑器里面内容进行编辑、保存并导出。

对Tinymce编辑器支持导入word请看这篇文章Tinymce富文本编辑器的改进：支持导入word。

实现效果如下：

2、npm安装依赖

@tinymce/tinymce-vue：tinymce官方提供了一个vue的组件tinymce-vue。如果有注册或购买过服务的话，可以直接通过组件配置api-key直接使用。

npm install @tinymce/tinymce-vue -S      //使用版本：^3.2.8
npm install tinymce -S                   //使用版本：^5.10.3
//导出Word需要安装的依赖
npm install jquery -S                    //使用版本：^3.6.0
npm install file-saver -S                //使用版本：^2.0.5

安装完成以后，在安装目录node_modules中找到tinymce/skins目录，然后将 skins目录拷贝到public/tinymce或者static/tinymce目录下。

因为tinymce默认是英文界面，需要下载一个中文包。把这个中文包放在public或static目录下的tinymce/langs。

下载地址：https://www.tiny.cloud/get-tiny/language-packages/

3.创建`Tinymce`子组件：Tinymce.vue

<template>
  <div>
    <div style="margin:10px">
      <el-button style="width:49%" @click="saveModify">保存修改</el-button>
      <el-button style="width:49%" @click="exportWord">导出word</el-button>
    </div>
    <!-- 富文本编辑器 -->
    <Editor
      id="tinymce"
      v-model="articleContent"
      :init="editorInit"
      :key="tinymceFlag"
    ></Editor>
  </div>
</template>

<script>
//引入jQuery和导出Word的JS文件
import $ from "jquery";
require("@/assets/js/jquery.wordexport.js");
// 引入Tinymce编辑器
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
//引入工具栏图标和主题
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
// 引入富文本编辑器主题的js和css，不然显示出错
import "tinymce/themes/silver/theme.min";
import "tinymce/skins/ui/oxide/skin.min.css";
// 扩展插件 - 根据需要引入
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/template"; // 模板插件
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/paste";
import "tinymce/plugins/preview";
export default {
  name: "TinymceEditor",
  components: { Editor },
  props: {
    height: {
      type: Number,
      default: 500
    },
    //从后台获取的字符串HTML数据，
    value: {
      type: String,
      // 这里我设定个默认值，实际开发中可至为空 - default:"",根据需求修改。
      default: `<table style="border-collapse: collapse;" border="1" width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td colspan="5" width="600"><p><strong>一、岗位基本情况</strong></p></td></tr><tr><td width="80"><p style="text-align: center;"><strong>岗位名称</strong></p></td><td colspan="2" width="241"><p style="text-align: center;"></p></td><td width="87"><p style="text-align: center;"><strong>岗位编号</strong></p></td><td width="234"><p style="text-align: center;">&nbsp;</p></td></tr><tr><td width="80"><p style="text-align: center;"><strong>所属部门</strong></p></td><td colspan="2" width="241"><p style="text-align: center;"></p></td><td width="87"><p style="text-align: center;"><strong>直接上级</strong></p></td><td width="234"><p style="text-align: center;">部门主管</p></td></tr><tr><td colspan="5" width="643"><p><strong>二、岗位目的</strong><span style="color: #969696;">（描述该职位的设立目的，突出对组织独一无二的贡献）</span></p></td></tr><tr><td colspan="5" width="643"><p></p></td></tr><tr><td colspan="5" width="643"><p><strong>三、岗位职责</strong><span style="color: #969696;">（该职位承担对公司的主要职责，按重要顺序列出每项主要工作职责）</span></p></td></tr><tr><td colspan="5" width="643"><p>1、</p></td></tr><tr><td colspan="5" width="643"><p><strong>四、任职资格</strong><span style="color: #969696;">（该岗位所需的最低资格要求，包括学历、专业、能力要求）</span></p></td></tr><tr><td colspan="2" width="95"><p>学历、专业</p></td><td colspan="3" width="548"><p><strong>全日制大专以上学历</strong></p></td></tr><tr><td colspan="2" width="95"><p>工作经验</p></td><td colspan="3" width="548"><p>２年以上工作经验，１年以上文员工作经验。</p></td></tr><tr><td colspan="2" width="95"><p>知识、技能</p></td><td colspan="3" width="548"><p>熟练操作word 和excel等办公软件</p></td></tr><tr><td colspan="5" width="643"><p><strong>五、工作环境</strong><span style="color: #969696;">（即该岗位从事工作所处的环境，包括：办公室、有无空调、有无粉尘、有害物质等）</span></p></td></tr><tr><td colspan="5" width="643"><p>办公室，有空调</p></td></tr></tbody></table>`
    },
    // 基本路径，默认为空根目录
    baseUrl: {
      type: String,
      default: ''
    },
    plugins: { //使用的插件 - 根据需求进行删减
      type: [String, Array],
      default:
        "link lists image code table wordcount media fullscreen paste preview"
    },
    toolbar: { //工具栏 - 根据需求进行删减
      type: [String, Array],
      default:
        "fontselect | bold italic underline strikethrough | link unlink image | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | removeformat"
    }
  },
  data() {
    return {
      articleContent:this.value,
      tinymceFlag: "",
      editorInit: {
        language_url: "/tinymce/langs/zh_CN.js",//引用public下的文件,确保打包后也能引用成功
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide", // skin路径，到样式文件夹即可
        content_css: "/tinymce/skins/content/default/content.css", //样式规则
        height: this.height,
        content_style:
          "* { padding:0; margin:0; } img {max-width:100% !important }",
        plugin_preview_width: 375, // 预览宽度
        plugin_preview_height: 668, //预览高度
        lineheight_val:
          "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5", //行高
        fontsize_formats:
          "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",
        font_formats:
          "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
        plugins: this.plugins,
        powerpaste_word_import: "merge",
        toolbar: this.toolbar,
        paste_data_images: true,
        statusbar: true, // 底部的状态栏
        menubar: true, // 最上方的菜单
        branding: false, // 水印“Powered by TinyMCE”
        // 此处为图片上传处理函数，这里直接用了base64的图片形式上传图片
        images_upload_handler: (blobInfo, success, failure) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        }
      },
    };
  },
  mounted() {
    tinymce.init({}); //初始化编辑器
  },
  methods: {
    // 导出word
    exportWord() {
      setTimeout(function() {
        // 找到编辑框里面的dom对象
        var dom = $("#tinymce_ifr")[0].contentDocument.documentElement
        $(dom).wordExport("岗位职责表");
      }, 300);
    },
    //保存内容
    saveModify(){
      //获取编辑器的内容，获取的是html，也就是包括标签和样式的内容。
      var content = tinymce.get('tinymce').getContent();
      //发送请求。。。
    }
  }
};
</script>

4、导出Word相关的jquery.wordexport.js，放在src/assets/js/下。

// 导入js文件
import $ from 'jquery'
import saveAs from 'file-saver'
if (typeof $ !== "undefined" && typeof saveAs !== "undefined") {
    (function($) {
        $.fn.wordExport = function(fileName) {
            fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
            var statics = {
                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>",
                  //不设置导出Word的页眉
                    // head: "<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n<style>\n_styles_\n</style>\n</head>\n",
                  //设置导出word的页眉
                    head: `<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n<style>
                            @page
                                {mso-page-border-surround-header:no;
                                mso-page-border-surround-footer:no;
                                mso-footnote-separator:url("/header.html") fs;
                                mso-footnote-continuation-separator:url("/header.html") fcs;
                                mso-endnote-separator:url("/header.html") es;
                                mso-endnote-continuation-separator:url("/header.html") ecs;}
                            @page WordSection1
                                {size:595.3pt 841.9pt;
                                margin:1.0cm 2.0cm 1.0cm 2.0cm;
                                mso-header-margin:42.55pt;
                                mso-footer-margin:49.6pt;
                                mso-header:url("/header.html") h1;
                                mso-paper-source:0;
                                layout-grid:15.6pt;}
                            div.WordSection1
                                {page:WordSection1;}
                            </style>\n_styles_\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++) {
                // 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/jpg");
                $(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 j = 0; j < images.length; j++) {
                mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
                mhtmlBottom += "Content-Location: " + images[j].location + "\n";
                mhtmlBottom += "Content-Type: " + images[j].type + "\n";
                mhtmlBottom += "Content-Transfer-Encoding: " + images[j].encoding + "\n\n";
                mhtmlBottom += images[j].data + "\n\n";
            }
            mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";

            //TODO: load css from included stylesheet
            var str = '<head><meta charset="utf-8"></meta>',
                styles = document.querySelectorAll('style');
            for (var n = 0; n < styles.length; n++) {
                str += styles[n].outerHTML;
            }
            str += "<style>table tr td{padding-left:5px;padding-right:5px}.tdTitle{background:#c2c1c1}.spaceRow{margin-top:10px;}table{width:100%;}</style>";
            str += "<style>table{border-collapse: collapse;table-layout: fixed}</style>"
            str += "<style>table td,th{ height:30px;font-size:14px;border-width:1px;border-style: solid;border-color: #000;word-break: keep-all;}</style>"
            str += "</head>"

            // Aggregate parts of the file together
            var fileContent = statics.mhtml.top.replace("_html_", statics.mhtml.head.replace("_styles_", str) + statics.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(blob, fileName + ".doc");
        };
    })($);
} else {
    if (typeof $ === "undefined") {
        console.error("jQuery Word Export: missing dependency (jQuery)");
    }
    if (typeof saveAs === "undefined") {
        console.error("jQuery Word Export: missing dependency (FileSaver.js)");
    }
}

5、如何设置导出word的页眉

首先新建一个Word文档，编辑好自己需要的页眉，保存为HTML网页，即后缀为.html文件，会得到一个.files文件夹。

直接将header.html文件移动到public目录下文字会乱码，所以先点击header.html浏览器打开，右键点击检查源代码，复制全部源代码粘贴至public/header.html。header.html代码修改如下：

1、将<meta http-equiv=Content-Type content="text/html; charset=gb2312">改为
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
2、<!-- 注释掉下面这一行 -->
<!-- <link id=Main-File rel=Main-File href="../岗位职责说明书.html"> -->

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 15">
<meta name=Originator content="Microsoft Word 15">
<!-- 注释掉下面这一行 -->
<!-- <link id=Main-File rel=Main-File href="../岗位职责说明书.html"> -->
</head>
<body lang=ZH-CN>
<div style='mso-element:footnote-separator' id=fs>
<p class=MsoNormal><span lang=EN-US><span style='mso-special-character:footnote-separator'><![if !supportFootnotes]>
<hr align=left size=1 width="33%">
<![endif]></span></span></p>
</div>
<div style='mso-element:footnote-continuation-separator' id=fcs>
<p class=MsoNormal><span lang=EN-US><span style='mso-special-character:footnote-continuation-separator'><![if !supportFootnotes]>
<hr align=left size=1>
<![endif]></span></span></p>
</div>
<div style='mso-element:endnote-separator' id=es>
<p class=MsoNormal><span lang=EN-US><span style='mso-special-character:footnote-separator'><![if !supportFootnotes]>
<hr align=left size=1 width="33%">
<![endif]></span></span></p>
</div>
<div style='mso-element:endnote-continuation-separator' id=ecs>
<p class=MsoNormal><span lang=EN-US><span style='mso-special-character:footnote-continuation-separator'><![if !supportFootnotes]>
<hr align=left size=1>
<![endif]></span></span></p>
</div>
<div style='mso-element:header' id=h1>
<div align=center>
<table class=MsoNormalTable border=1 cellspacing=0 cellpadding=0 width=643
 style='border-collapse:collapse;mso-table-layout-alt:fixed;border:none;
 mso-border-alt:solid windowtext 1.5pt;mso-yfti-tbllook:1184;mso-padding-alt:
 0cm 5.4pt 0cm 5.4pt;mso-border-insideh:1.0pt solid windowtext;mso-border-insidev:
 1.0pt solid windowtext'>
 <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;page-break-inside:avoid;
  height:19.85pt;mso-height-rule:exactly'>
  <td width=408 colspan=2 style='width:306.0pt;border-top:1.5pt;border-left:
  1.5pt;border-bottom:1.0pt;border-right:1.0pt;border-color:windowtext;
  border-style:solid;padding:0cm 5.4pt 0cm 5.4pt;height:19.85pt;mso-height-rule:
  exactly'>
  <p class=MsoNormal align=center style='text-align:center;layout-grid-mode:
  char;mso-layout-grid-align:none'><span lang=EN-US style='font-size:16.0pt;
  font-family:宋体;mso-fareast-theme-font:minor-fareast'>***</span><span
  style='font-size:16.0pt;font-family:宋体;mso-fareast-theme-font:minor-fareast'>有限公司文件<span
  lang=EN-US><o:p></o:p></span></span></p>
  </td>
  <td width=235 colspan=2 style='width:175.95pt;border-top:solid windowtext 1.5pt;
  border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.5pt;
  mso-border-left-alt:solid windowtext 1.0pt;padding:0cm 5.4pt 0cm 5.4pt;
  height:19.85pt;mso-height-rule:exactly'>
  <p class=MsoNormal style='mso-margin-top-alt:auto'><span style='font-size:
  12.0pt;font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-bidi-font-family:
  宋体'>编号：<span lang=EN-US>***<o:p></o:p></span></span></p>
  </td>
 </tr>
 <tr style='mso-yfti-irow:1;page-break-inside:avoid;height:17.0pt;mso-height-rule:
  exactly'>
  <td width=408 colspan=2 rowspan=2 style='width:306.0pt;border-top:none;
  border-left:solid windowtext 1.5pt;border-bottom:solid windowtext 1.0pt;
  border-right:solid windowtext 1.0pt;mso-border-top-alt:solid windowtext 1.0pt;
  padding:0cm 1.4pt 0cm 1.4pt;height:17.0pt;mso-height-rule:exactly'>
  <p class=MsoNormal align=center style='text-align:center'><span
  style='font-size:16.0pt;mso-bidi-font-size:14.0pt;font-family:黑体'>岗位说明书<span
  lang=EN-US><o:p></o:p></span></span></p>
  </td>
  <td width=235 colspan=2 style='width:175.95pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.5pt;
  mso-border-top-alt:solid windowtext 1.0pt;mso-border-left-alt:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:17.0pt;mso-height-rule:exactly'>
  <p class=MsoNormal><span style='font-size:12.0pt;font-family:宋体;mso-fareast-theme-font:
  minor-fareast;mso-bidi-font-family:宋体'>实施日期：<span lang=EN-US>****</span>年<span
  lang=EN-US>*</span>月<span lang=EN-US>*</span>日<span lang=EN-US><o:p></o:p></span></span></p>
  </td>
 </tr>
 <tr style='mso-yfti-irow:2;page-break-inside:avoid;height:17.0pt;mso-height-rule:
  exactly'>
  <td width=235 colspan=2 style='width:175.95pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.5pt;
  mso-border-top-alt:solid windowtext 1.0pt;mso-border-left-alt:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:17.0pt;mso-height-rule:exactly'>
  <p class=MsoNormal><span style='font-size:12.0pt;font-family:宋体;mso-fareast-theme-font:
  minor-fareast;mso-bidi-font-family:宋体'>页码：</span><!--[if supportFields]><span
  lang=EN-US style='font-size:12.0pt;font-family:宋体;mso-fareast-theme-font:
  minor-fareast;mso-bidi-font-family:宋体'><span style='mso-element:field-begin'></span>PAGE<span
  style='mso-spacerun:yes'>&nbsp; </span>* Arabic<span
  style='mso-spacerun:yes'>&nbsp; </span>* MERGEFORMAT<span style='mso-element:
  field-separator'></span></span><![endif]--><span lang=EN-US>1</span><!--[if supportFields]><span
  lang=EN-US style='font-size:12.0pt;font-family:宋体;mso-fareast-theme-font:
  minor-fareast;mso-bidi-font-family:宋体'><span style='mso-element:field-end'></span></span><![endif]--><span
  style='font-size:12.0pt;font-family:宋体;mso-fareast-theme-font:minor-fareast;
  mso-bidi-font-family:宋体;mso-ansi-language:ZH-CN'>/</span><span lang=EN-US
  style='font-size:12.0pt;font-family:宋体;mso-fareast-theme-font:minor-fareast;
  mso-bidi-font-family:宋体'><span style='mso-field-code:"NUMPAGES \* Arabic \* MERGEFORMAT"'><span
  lang=EN-US style='mso-ansi-language:ZH-CN'><span lang=EN-US>1</span></span></span><o:p></o:p></span></p>
  </td>
 </tr>
 <tr style='mso-yfti-irow:3;mso-yfti-lastrow:yes;page-break-inside:avoid;
  height:17.0pt;mso-height-rule:exactly'>
  <td width=214 style='width:160.65pt;border-top:none;border-left:solid windowtext 1.5pt;
  border-bottom:solid windowtext 1.5pt;border-right:solid white 1.0pt;
  mso-border-top-alt:solid windowtext 1.0pt;mso-border-top-alt:windowtext 1.0pt;
  mso-border-left-alt:windowtext 1.5pt;mso-border-bottom-alt:windowtext 1.5pt;
  mso-border-right-alt:white .5pt;mso-border-style-alt:solid;padding:0cm 5.4pt 0cm 5.4pt;
  height:17.0pt;mso-height-rule:exactly'>
  <p class=MsoNormal><span style='font-size:12.0pt;font-family:宋体;mso-fareast-theme-font:
  minor-fareast;mso-bidi-font-family:宋体'>编制：<span lang=EN-US><o:p></o:p></span></span></p>
  </td>
  <td width=214 colspan=2 style='width:160.65pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.5pt;border-right:solid white 1.0pt;
  mso-border-top-alt:solid windowtext 1.0pt;mso-border-left-alt:solid white .5pt;
  mso-border-top-alt:windowtext 1.0pt;mso-border-left-alt:white .5pt;
  mso-border-bottom-alt:windowtext 1.5pt;mso-border-right-alt:white .5pt;
  mso-border-style-alt:solid;padding:0cm 5.4pt 0cm 5.4pt;height:17.0pt;
  mso-height-rule:exactly'>
  <p class=MsoNormal><span style='font-size:12.0pt;font-family:宋体;mso-fareast-theme-font:
  minor-fareast;mso-bidi-font-family:宋体'>审核：<span lang=EN-US><o:p></o:p></span></span></p>
  </td>
  <td width=214 style='width:160.65pt;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.5pt;border-right:solid windowtext 1.5pt;
  mso-border-top-alt:solid windowtext 1.0pt;mso-border-left-alt:solid white .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:17.0pt;mso-height-rule:exactly'>
  <p class=MsoNormal><span style='font-size:12.0pt;font-family:宋体;mso-fareast-theme-font:
  minor-fareast;mso-bidi-font-family:宋体'>批准<span lang=EN-US><o:p></o:p></span></span></p>
  </td>
 </tr>
 <![if !supportMisalignedColumns]>
 <tr height=0>
  <td width=214 style='border:none'></td>
  <td width=194 style='border:none'></td>
  <td width=20 style='border:none'></td>
  <td width=214 style='border:none'></td>
 </tr>
 <![endif]>
</table>
</div>
<p class=a0 style='margin-top:0cm;margin-right:36.85pt;margin-bottom:0cm;
margin-left:0cm;text-align:justify;text-justify:inter-ideograph;line-height:
8.0pt;mso-line-height-rule:exactly;layout-grid-mode:char;mso-layout-grid-align:
none'><span lang=EN-US><o:p>&nbsp;</o:p></span></p>
</div>
</body>
</html>

6、编辑内容，点击导出Word。

7.会提示是否确认加载外部资源，点击是，导出Word成功如下：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^