docx-preview插件

### 关于 `docx-preview` 插件

#### 安装过程

为了使用 `docx-preview` 插件，在项目中需先安装该插件。推荐使用 npm 进行安装：

npm install docx-preview --save

对于遇到安装困难的情况，可以尝试使用 cnpm 来完成安装[^2]。

另外，由于 `docx-preview` 可能依赖于 `jszip` 库来处理文档中的压缩文件，因此建议一并安装 `jszip`:

npm install jszip --save

#### 基本使用方法

在成功安装之后，可以在 Vue 组件或其他 JavaScript 文件里引入 `docx-preview` 并初始化它以显示 DOCX 文档的内容。下面是一个简单的例子展示如何加载本地或远程的 `.docx` 文件进行预览[^3]:

<template>
  <div id="preview-container"></div>
</template>

<script>
import DocxPreview from 'docx-preview'

export default {
  mounted() {
    const fileInput = document.createElement('input')
    fileInput.type = 'file'
    fileInput.accept = '.docx'
    
    fileInput.onchange = () => {
      const file = fileInput.files[0]
      
      // 渲染 .docx 文件到指定容器内
      DocxPreview.render({
        file,
        container: '#preview-container',
      })
    }
    
    fileInput.click()
  },
}
</script>

这段代码创建了一个隐藏的文件输入框让用户选择要上传查看的 Word (.docx) 文件，并将其渲染至页面上的特定区域以便浏览其内容。

#### 下载功能实现

除了在线预览外，有时也需要提供给用户下载原始文件的功能。这可以通过 HTML 的 `<a>` 标签配合 `download` 属性轻松达成[^4]：

<a href="https://example.com/path/to/document.docx" download="document_name">点击这里下载文档</a>

上述链接会触发浏览器自动下载位于指定 URL 上的文件，并允许自定义保存下来的文件名。