Preview docx file in Vue

Viewed 2649

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.

1 Answers

Eventually, I found the solution by using pdftron.

  1. Install @pdftron/webviewer.
npm install --save @pdftron/webviewer
  1. Add script to package.json.
"scripts": {
   ...
   "postinstall": "node ./init-webviewer.js"
   ...
}
  1. 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();
  1. 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.
      });
Related