引用插件
 
安装
 
npm i docxtemplater@3.17.6
npm i pizzip  
npm i jszip-utils@0.1.0  
npm i jszip@2.6.1 
npm i file-saver@2.0.2
npm i open-docxtemplater-image-module 
 
引入插件
 
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
 
Word模板
 
不要慌，很容易的，新建个word,编写变量即可(demo_word.docx,可将word文档放在static下面)
 
注：语法可参考网站：https://docxtemplater.com/demo/#loop-table
 
 
data数据
 
echartUrl1: '',
clients: [
    {
      "first_name": "John",
      "last_name": "Doe",
      "phone": "+44546546454"
    },
    {
      "first_name": "Jane",
      "last_name": "Doe",
      "phone": "+445476454"
    }
  ]
 
页面函数
 
/**
 * description： 导出echarts图片，格式转换
 *
 * created by aa on 2020-08-18
 *
 */
base64DataURLToArrayBuffer(dataURL) {
    const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
    if (!base64Regex.test(dataURL)) {
        return false;
    }
    const stringBase64 = dataURL.replace(base64Regex, "");
    let binaryString;
    if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
    } else {
        binaryString = new Buffer(stringBase64, "base64").toString("binary");
    }
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes.buffer;
},
/**
 * description： 导出文档
 *
 * created by aa on 2020-08-18
 *
 */
exportWord(){
    var ImageModule = require('open-docxtemplater-image-module');
    // 点击导出word
    let _this = this;
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent("../../../../static/demo_word.docx",function(error, content) {
        // exportTemplate.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
            throw error;
        }

        // 图片处理
        let opts = {}
        opts.centered = true;  // 图片居中，在word模板中定义方式为{%%image}
        opts.fileType = "docx";
        opts.getImage = function(chartId){
            return _this.base64DataURLToArrayBuffer(chartId);
        }
        opts.getSize = function(){
            return [600,300]
        }

        let imageModule = new ImageModule(opts);
        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater();
        doc.attachModule(imageModule);
        doc.loadZip(zip);

        // 设置模板变量的值
        doc.setData({
            clients: _this.clients,
            image1:_this.echartUrl1, // 获取echarts图片
        });

        try {
            // 用模板变量的值替换所有模板变量
            doc.render();
        } catch (error) {
            // 抛出异常
            let e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties
            };
            throw error;
        }
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
            type: "blob",
            mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "word文档名称.docx");
    });
},
 
echart图片获取
 
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
// 绘制图表
myChart1.setOption(this.option1);
// 获取echart图片
this.echartUrl1 = myChart1.getDataURL();
 
相关文章：vue导出word文档

 
示例操作步骤如下：
 
1、首先打开word文档，然后在“布局”菜单中，点击打开“页边距”选项。
 

 
2、然后在选项中点击打开“自定义边距”设置。
 

 
3、然后在对话框中，将页边距的上下左右设置为0。
 

 
4、确定之后即可看到文档内容铺满页面。
 

 
Word删除多余的行以后，把剩下的一半表格铺满整个页面。怎么弄啊？
 
把鼠标移到表格右下角的小方格上，等鼠标变为斜箭头的时候，按住左键往下拉就可以了。
 
word 里怎么让字体占满整个页面?
 
方法一：在字号框中设置
 
1、选中需要设置的文本；
 
2、选择开始选项卡，在字号处输入180磅并回车即可，如图所示。
 

 
3、设置后的效果如图所示。
 

 
方法二：连续增大字体
 
1、选中需要设置的文本；
 
2、然后使用Ctrl+]快捷键调节，每按动一次Ctrl+]，字体将增大1磅。按住不放可实现连续调节字体大小，直至所需要的大小。
 
方法三：快速增大字体
 
1、选中需要设置的文本；
 
2、然后使用Ctrl+Shift+>快捷键进行调节，每按动一次Ctrl+Shift+>，所选字体将增大一个字号。按住不放可实现快速调节字体大小，直至所需要的大小。
 
word设置问题，如何让文字把行填满
 

 
例如上面文字不能填满整个行，是因为每行后面都有段落标记，可以通过查找和替换功能将其删除，这文本就填满整个行，具体操作步骤：
 
1、单击开始----查找按钮；
 

 
2、弹出查找和替换对话框，单击特殊格式按钮，在弹出选项中选择段落标记；
 

 
3、切换到替换选项卡，单击全部替换按钮即可。
 
复制网络上的文档到WORD时只占页面的一半，怎么把行铺满？
 
复制网络上的文档到WORD时只占页面的一半解决方法是：
 
1、删除分页符法，显示全部符号，查看是否有手动分页符，有则删除；
 
2、表格类文档有时也会出现你说的情况，可以用调整表格格式的方法解决；
 
3、在网络上复制文档，再粘贴到WORD时，用“选择性粘贴--无格式文本”方式，完成。
 
word中，怎样把已经编辑好的表格平均的布满整个页面？
 
很简单的一个问题：
 
1、在设置WORD页面格式的时候就把页边为0。
 
2、在WORD中点表格--插入表格(对话框中选择)“根据窗口调整表格”即可。就可以看到表格均匀的布满你的页面。
 
word中如何将表格铺满页面而不跳到第二页
 
把表格后面的空行，就是有换行符的那种都删除，只剩下一行时，选中这个段落标记，就是一个回车符这种的，然后再执行格式→段落→行距→选择固定值→然后在设置值那里输入1就OK了。
 
希望采纳哦，我一向都是用这种方法解决的。
 
如何将word中的字铺满整个版面
 
显示标尺，然后往两边拉大点看看。要么先复制到记事本，选择自动换行后，再复制到Word来(主要是把换行格式去掉)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery3.4.0.js"></script>
    <script src="../lib/FileSaver.js"></script>
    <script src="../lib/jquery.wordexport.js"></script>
</head>
<body>
<div id="content" class="content">
    <h1>
        这是一个word测试
    </h1>
    <h2>
        这是一个word测试
    </h2>
    <h3>
        这是一个word测试
    </h3>
    <h4>
        这是一个word测试
    </h4>
    <h5>
        这是一个word测试
    </h5>
    <table>
        <thead>
           <tr>
               <td>第一列</td>
               <td>第二列</td>
               <td>第三列</td>
           </tr>
        </thead>
        <tbody>
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
            </tr>
            <tr>
                <td>41</td>
                <td>42</td>
                <td>43</td>
            </tr>
            <tr>
                <td>51</td>
                <td>52</td>
                <td>53</td>
            </tr>
        </tbody>
    </table>
</div>



<script>
    htmlToWord($("#content"),"test01");
    function htmlToWord(ele,name) {
        var rules = "table{border-collapse:collapse;margin:0 auto;text-align:center;width: 100%;}table td,table th{border:1px solid #cad9ea;color:#666;height:30px}table thead th{background-color:#F1F1F1;min-width:400px}table tr{background:#fff}",
            ss = document.styleSheets;
        for(var i = 0; i < ss.length; ++i) {
            for(var x = 0; x < ss[i].cssRules.length; ++x) {
                rules += ss[i].cssRules[x].cssText;
            }
        }

        //先clone来避免影响页面显示
        var clone = ele.clone();
        //找到所有echarts图表容器
        var charts = clone.find(".chart");
        //隐藏无需导出的dom
        clone.find(".input_div").hide();
        //简单控制流程
        var flag = charts.length;
        for(var i = 0; i < charts.length; i++) {
            //获取echarts对象
            var curEchart = echarts.getInstanceByDom(charts[i]);
            if(curEchart) {
                //将图表替换为图片
                var base = curEchart.getConnectedDataURL();
                var img = $('<img style="" src="' + base + '"/>');
                $(charts[i]).html(img);
                flag--;
            } else {
                flag--;
            }
        }
        var interval = setInterval(function() {
            if(!flag) {
                clearInterval(interval);
                //导出word
                clone.wordExport(name, rules);
            }
        }, 200)
    }
</script>
</body>
</html>
 
FileSaver.js
 
大部分cdn上都能搜到,这里就不贴代码了
 
jquery.wordexport.js
 
if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
    (function($) {
        $.fn.wordExport = function(fileName,rule) {
            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++) {
                // 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
            //源码将styles置为"",这里我们只需改动成传入css,赋值给styles即可;
            var styles = rule || "";
            // 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(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)");
    }
}

我们知道，在MS word中，默认的页面大小是letter(8.5”x11”)，除此之外，word还提供了其他一些预定义的页面大小，如Legal (5.4”x14”)，A3(11.69”x16.54”)，A4 (8.27”x11.69”)等，使用户可以根据自己的需求来选择页面大小。而且，如果我们想设置的页面大小不在下拉列表中，还可以通过点击页面设置按钮从中选择自定义大小来定义页面的宽度和高度，非常方便。
 
那么怎样使用编程的方式来实现这些功能呢？E-iceblue提供了一款软件Spire.Doc，它给编程者提供了一种类似的方法来设置页面的大小。本文将分享如何使用Spire.Doc 软件, 通过C#编程的方式来选择页面大小或自定义页面大小。
 
首先，从e-iceblue上下载并安装Spire.Doc软件，其次从BIN文件夹中选择相应的.dll文件添加引用至Visual Studio。
 
 
 下面是代码片段：
 
步骤1：创建一个新的word文档，添加一个空白Section；
 
Document doc = new Document();
Section section = doc.AddSection();
 
步骤2：设置页面大小为A4。在页面大小类中，有很多预定义的页面大小；
 
section.PageSetup.PageSize = PageSize.A4;
 
如果你想自定义页面的大小，用下面这两行代码替换上面的代码：
 
section.PageSetup.PageSize = new System.Drawing.SizeF(500, 800);
section.PageSetup.Orientation = PageOrientation.Portrait;
 
步骤3：添加一些文本到section；
 
Paragraph Para = section.AddParagraph();
            Para.AppendText("朝 辞 白 帝 彩 云 间 ，"
            + "千 里 江 陵 一 日 还 。"
            + "两 岸 猿 声 啼 不 尽 ，"
            + "轻 舟 已 过 万 重 山 。");
 
步骤4：保存文档并重新打开；
 
doc.SaveToFile("result.docx", FileFormat.Docx);
System.Diagnostics.Process.Start("result.docx");
 
效果图：
 
1.选择一个预定义的页面大小 
 
 
2.自定义页面大小 
  
 
全部代码：
 
using System.Drawing;
using Spire.Doc;
using Spire.Doc.Documents;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace set_page_size_of_word_document
{
    class Program
    {
        static void Main(string[] args)
        {
            Document doc = new Document();
            Section section = doc.AddSection();

            section.PageSetup.PageSize = PageSize.A4;
            //section.PageSetup.PageSize = new System.Drawing.SizeF(550, 800);
            //section.PageSetup.Orientation = PageOrientation.Portrait;

            Paragraph Para = section.AddParagraph();
            Para.AppendText("朝 辞 白 帝 彩 云 间 ，"
            + "千 里 江 陵 一 日 还 。"
            + "两 岸 猿 声 啼 不 尽 ，"
            + "轻 舟 已 过 万 重 山 。");

            doc.SaveToFile("result.docx", FileFormat.Docx);
            System.Diagnostics.Process.Start("result.docx");
        }
    }
}