当前位置：首页 > article >正文

Vue.js组件开发-Vue实现上传word模版打印设置自定义样式和布局

article 2025/1/31 1:29:12

要使用 Vue 实现上传 Word 模板、打印并设置自定义样式和布局，可以借助一些工具和库来完成这个任务。

实现步骤

创建 Vue 项目：使用 Vue CLI 创建一个新的 Vue 项目。
安装依赖：安装 docx-templates 库来处理 Word 模板，file-saver 库用于保存生成的 Word 文件。
创建上传组件：在 Vue 组件中添加文件上传功能。
处理 Word 模板：使用 docx-templates 库加载并处理 Word 模板。
设置自定义样式和布局：在处理模板时添加自定义样式和布局。
生成并保存 Word 文件：将处理后的文档保存为 Word 文件。
打印功能：提供打印生成的 Word 文件的选项。

详细代码及注释

1. 创建 Vue 项目

vue create word-template-app
cd word-template-app

2. 安装依赖

npm install docx-templates file-saver

3. 创建上传组件

在 src/components 目录下创建 WordUpload.vue 文件，代码如下：

<template>
  <div>
    <!-- 文件上传输入框 -->
    <input type="file" @change="handleFileUpload" accept=".docx" />
    <!-- 打印按钮 -->
    <button @click="printDocument" :disabled="!generatedDoc">打印</button>
  </div>
</template>

<script>
import Docxtemplater from 'docx-templates';
import PizZip from 'pizzip';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      file: null, // 上传的文件
      generatedDoc: null, // 生成的 Word 文档
    };
  },
  methods: {
    async handleFileUpload(event) {
      // 获取上传的文件
      this.file = event.target.files[0];
      if (this.file) {
        try {
          // 读取文件内容
          const reader = new FileReader();
          reader.readAsArrayBuffer(this.file);
          reader.onload = async () => {
            const arrayBuffer = reader.result;
            // 使用 pizzip 处理文件
            const zip = new PizZip(arrayBuffer);
            // 创建 Docxtemplater 实例
            const doc = new Docxtemplater(zip);

            // 这里可以添加自定义数据
            const data = {
              title: '自定义标题',
              content: '自定义内容',
            };

            // 渲染模板
            doc.render(data);

            // 添加自定义样式和布局
            // 例如，修改段落样式
            const paragraphs = doc.getZip().file('word/document.xml').asText();
            const newParagraphs = paragraphs.replace(
              /<w:pPr>/g,
              '<w:pPr><w:rPr><w:sz w:val="24"/><w:szCs w:val="24"/></w:rPr></w:pPr>'
            );
            doc.getZip().file('word/document.xml', newParagraphs);

            // 生成 Word 文件
            const output = doc.getZip().generate({ type: 'blob' });
            this.generatedDoc = output;

            // 保存文件
            saveAs(output, 'generated_document.docx');
          };
        } catch (error) {
          console.error('处理文件时出错:', error);
        }
      }
    },
    printDocument() {
      if (this.generatedDoc) {
        // 创建一个临时的 URL
        const url = URL.createObjectURL(this.generatedDoc);
        // 打开新窗口
        const newWindow = window.open(url, '_blank');
        // 等待窗口加载完成后打印
        newWindow.onload = () => {
          newWindow.print();
          // 释放 URL 对象
          URL.revokeObjectURL(url);
        };
      }
    },
  },
};
</script>

4. 在 `App.vue` 中使用组件

<template>
  <div id="app">
    <WordUpload />
  </div>
</template>

<script>
import WordUpload from './components/WordUpload.vue';

export default {
  name: 'App',
  components: {
    WordUpload,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>