预览Vue中的docx文件

Question

有什么方法可以预览vue.js中的docx文件吗？

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

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

Answer 1

最后，我通过使用pdftron找到了解决方案。

1. 安装@pdftron/webviewer。

npm install --save @pdftron/webviewer

1. 向package.json添加脚本。

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

1. 在项目根目录中创建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();

1. 在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.
      });