接上文：Vue3.0 实现 word 文档的预览和下载

果然不出我所料，需求变了，变了......

需求分析

• 用户想自由设定某一块文本内容的样式；
• 需要提供打印功能；

实现效果展示

1.导出 .docx 格式的 word 文档

2.文档打印

实现步骤

1. 选择一个趁手的富文本编辑器

我选用的是 tinymce富文本编辑器。关于富文本编辑器这里不多说了，大家根据喜好选择，目的就是为了获取富文本框中HTML的源代码。

2.将富文本编辑器中编辑的内容导出成 word 文档

用到的插件

• html-docx-js-typescript
• file-saver

插件安装

yarn add html-docx-js-typescrip file-saver -S

插件引入

import { asBlob } from "html-docx-js-typescript";
import { saveAs } from "file-saver";

生成Docx文件并导出

<el-button type="primary" @click="saveDocx"> 生成HTML文件 </el-button>

saveDocx() {
  asBlob(this.val).then((data) => {
    saveAs(data, "实施方案.docx");
  });
},

3.打印

打印功能我使用了插件 vue3-print-nb 。

插件安装

yarn add vue3-print-nb -S

挂载

import print from 'vue3-print-nb';

const app = createApp(App);
...
app.use(print);
app.mount('#app');

使用

1. 定义一个存放内容的标签

<div
  id="printArea"
  v-html="val"
  style="text-align: left; padding: 48px;"
></div>

2. 初始化配置

<script>
...
export default {
  data() {
    let that = this;
    return {
      print: {
        id: "printArea",
        popTitle: "", // 打印配置页上方的标题
        extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: "预览的标题", // 打印预览的标题
        previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback() {
          console.log("正在加载预览窗口！");
          console.log(that.msg, this);
        }, // 预览窗口打开之前的callback
        previewOpenCallback() {
          console.log("已经加载完预览窗口，预览打开了！");
        }, // 预览窗口打开时的callback
        beforeOpenCallback() {
          console.log("开始打印之前！");
        }, // 开始打印之前的callback
        openCallback() {
          console.log("执行打印了！");
        }, // 调用打印时的callback
        closeCallback() {
          console.log("关闭了打印工具！");
        }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() {
          console.log("点击v-print绑定的按钮了！");
        },
        standard: "",
        extarCss: "",
      },
    };
  },

3.文件打印

<el-button type="primary" v-print="print"> 文件打印 </el-button>

注意：打印的时候如果不需要页眉和页脚，可以通过添加以下代码去除。

<style media="printContent">
/* 去掉页脚页眉 */
@page {
  size: auto;
  margin: 0mm auto;
}
</style>

备注

源码已上传gitee，功能已集成至项目：VUE-ADMIN-MS，大家自行取用，记得给 Star 哦 ！！！