html页面vue写法导出word模板_vue html word-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoHelloWord/article/details/109720496

这篇博客介绍了如何在Vue.js应用中，结合axios库，处理多选数据并导出为Word模板。通过循环遍历多选项，逐个发送请求获取详细信息，然后利用docxtemplater和FileSaver.js库将数据填充到预定义的Word模板中，最终生成可下载的Word文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
多选或者单选导出word模板。写法是在html页面vue的写法
这里的写法是根据，多选获取每条的id，循环进行接口请求，

在这里插入图片描述

在这里插入图片描述
设置取消勾选，table里要有ref

<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.19.7/docxtemplater.js"></script>
    <script src="https://unpkg.com/pizzip@3.0.6/dist/pizzip.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
    <script src="https://unpkg.com/pizzip@3.0.6/dist/pizzip-utils.js"></script>

<button class="buttonstyle" @click="shiyiix">导出</button>




shiyiix() {
                    var that = this;
                    for (let i = 0; i < that.multipleSelection.length; i++) {
                        console.log(that.multipleSelection[i].id)
                        axios.get('list.ashx', {
                            params: {
                                action: 'GetComDetails',
                                id: this.multipleSelection[i].id,
                                //id:'89',

                            }
                        })
                        .then(function (res) {
                            console.log(res)
                            that.lmm = res.data.data
                            that.q = res.data.data.hcName
                            console.log(that.q)
                            that.daochu(that.lmm);
                            setTimeout(function () {
                                that.$refs.multipleTable.clearSelection();
                            },1000)
                            console.log(that.multipleSelection)


                        })
                        .catch(function (err) {
                            console.log(err)
                        });

                        
                    }
                },




daochu(e) {
                    var that = this;
                    // 读取并获得模板文件的二进制内容
                    PizZipUtils.getBinaryContent("item.docx", function (error, content) {
                        // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
                        // 抛出异常
                        if (error) {
                            throw error;
                        }
                        // 创建一个JSZip实例，内容为模板的内容
                        let zip = new PizZip(content);
                        // 创建并加载docxtemplater实例对象
                        let doc = new docxtemplater().loadZip(zip);
                        // 设置模板变量的值
                        doc.setData({
                            ...e, //这里是上面form表单的内容
                        });
                        try {
                            // 用模板变量的值替换所有模板变量
                            doc.render();
                        } catch (error) {
                            // 抛出异常
                            let e = {
                                message: error.message,
                                name: error.name,
                                stack: error.stack,
                                properties: error.properties
                            };
                            console.log(JSON.stringify({
                                error: e
                            }));
                            throw error;
                        }

                        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
                        let out = doc.getZip().generate({
                            type: "blob",
                            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                        });
                        // 将目标文件对象保存为目标类型的文件，并命名

                        saveAs(out, e.hcName + ".docx");
                        
                    });
                },