vue实现word预览

Vue 实现 Word 预览的方法

在 Vue 项目中实现 Word 文档预览，可以通过以下几种方式实现：

使用第三方库 mammoth.js

mammoth.js 是一个将 Word 文档（.docx）转换为 HTML 的 JavaScript 库。通过将 Word 文档转换为 HTML，可以在 Vue 中直接渲染预览。

安装 mammoth.js：

npm install mammoth

在 Vue 组件中使用：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".docx" />
    <div v-html="previewContent"></div>
  </div>
</template>

<script>
import mammoth from "mammoth";

export default {
  data() {
    return {
      previewContent: "",
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          mammoth
            .extractRawText({ arrayBuffer: e.target.result })
            .then((result) => {
              this.previewContent = result.value;
            })
            .catch((error) => {
              console.error(error);
            });
        };
        reader.readAsArrayBuffer(file);
      }
    },
  },
};
</script>

使用 Office Web Viewer

Office Web Viewer 是微软提供的在线文档预览服务，可以直接嵌入到 Vue 项目中。

在 Vue 组件中使用：

<template>
  <div>
    <iframe
      :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodedUrl}`"
      width="100%"
      height="600px"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: "https://example.com/document.docx",
    };
  },
  computed: {
    encodedUrl() {
      return encodeURIComponent(this.fileUrl);
    },
  },
};
</script>

使用 docx-preview

docx-preview 是一个专门用于预览 Word 文档的 JavaScript 库，支持在浏览器中直接渲染 Word 文档。

安装 docx-preview：

npm install docx-preview

在 Vue 组件中使用：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".docx" />
    <div ref="previewContainer"></div>
  </div>
</template>

<script>
import { renderAsync } from "docx-preview";

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          renderAsync(e.target.result, this.$refs.previewContainer)
            .then(() => {
              console.log("Document rendered");
            })
            .catch((error) => {
              console.error(error);
            });
        };
        reader.readAsArrayBuffer(file);
      }
    },
  },
};
</script>

使用 PDF.js 间接预览

如果允许将 Word 文档转换为 PDF 格式，可以使用 PDF.js 进行预览。

安装 pdfjs-dist：

npm install pdfjs-dist

在 Vue 组件中使用：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".pdf" />
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from "pdfjs-dist";

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const loadingTask = pdfjsLib.getDocument(e.target.result);
          loadingTask.promise.then((pdf) => {
            pdf.getPage(1).then((page) => {
              const viewport = page.getViewport({ scale: 1.0 });
              const canvas = this.$refs.pdfCanvas;
              const context = canvas.getContext("2d");
              canvas.height = viewport.height;
              canvas.width = viewport.width;
              page.render({
                canvasContext: context,
                viewport: viewport,
              });
            });
          });
        };
        reader.readAsArrayBuffer(file);
      }
    },
  },
};
</script>

注意事项

• 文件大小限制：对于大文件，预览可能会影响性能，建议限制文件大小或分页加载。
• 格式兼容性：不同库对 Word 文档的格式支持可能不同，复杂格式可能会出现渲染差异。
• 安全性：直接渲染用户上传的 HTML 内容可能存在 XSS 风险，建议使用 DOMPurify 等库进行清理。

以上方法可以根据项目需求选择最适合的实现方式。