在 Vue 中预览 docx 文件

Question

有没有办法在 vue.js 中预览 docx 文件？

Docx 文件由带有 type="file" 的 input 标签上传。

我尝试过使用vue-doc-preview npm，但它需要在线url的url，而不是本地url。

Answer 1

最终，我通过 pdftron.

找到了解决方案

安装@pdftron/webviewer.

npm install --save @pdftron/webviewer

将脚本添加到 package.json。

"scripts": {
   ...
   "postinstall": "node ./init-webviewer.js"
   ...
}

在项目的根目录中创建 init-webviewer.js。

const fs = require('fs-extra');

const copyFiles = async () => {
  try {
    await fs.copy('./node_modules/@pdftron/webviewer/public', './public/webviewer/');
  } catch (err) {
    console.error(err);
  }
};

copyFiles();

在vue文件中，使用WebViewer。

...
    <div ref='viewer'"></div>
...

import WebViewer from '@pdftron/webviewer';

    ...

    WebViewer({
      path: `${process.env.BASE_URL}webviewer`,
      fullAPI: true
    }, this.$refs.viewer)
      .then((instance) => {
        instance.loadDocument(this.file); // this.file is the File object to be uploaded.
      });

在 Vue 中预览 docx 文件

Preview docx file in Vue

docx

vue.js