Preview docx file in Vue

Question

Is there any way to preview docx file in vue.js?

Docx file is uploaded by the input tag with type="file".

I have tried to use vue-doc-preview npm, but it needs the url of the online url, not the local url.

Answer 1

Eventually, I found the solution by using pdftron.

1. Install @pdftron/webviewer.

npm install --save @pdftron/webviewer

2. Add script to package.json.

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

3. create init-webviewer.js in the root of the project.

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();

4. In vue file, use 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.
      });