前端巧用组件实现docx、pdf文档在线预览

在业务中，如果遇到文档管理类的功能，会出现需要在线预览的业务需求，本文主要是通过第三方库来实现文档预览功能，并将其封装成preview组件。

docx

docx的实现需要使用docx-preview库。首先，安装docx-preview库：

npm install --save docx-preview

然后，在代码中导入该库：

import docxPreview from 'docx-preview';

接下来，可以按照如下方式使用该库：

const url = 'https://example.com/document.docx';
docxPreview.load(url, {
  renderMode: 'canvas',
  canvasWidth: 800,
  canvasHeight: 600,
}).then((result) => {
  // 将result渲染到dom元素中
  const element = document.getElementById('preview');
  element.appendChild(result.canvas);
});

pdf

pdf的实现需要使用pdfjs-dist库。首先，安装pdfjs-dist库：

npm install --save pdfjs-dist

然后，在代码中导入该库：

import pdfjs from 'pdfjs-dist';

接下来，可以按照如下方式使用该库：

const url = 'https://example.com/document.pdf';
pdfjs.getDocument(url).then((pdfDocument) => {
  // 获取pdf第一页
  const page = await pdfDocument.getPage(1);
  // 将页面渲染到canvas元素中
  const canvas = document.getElementById('preview');
  const viewport = page.getViewport({ scale: 1 });
  const context = canvas.getContext('2d');
  page.render({ canvasContext: context, viewport }).promise.then(() => {
    // 渲染完成
  });
});

组件封装

将上面两个库封装成一个preview组件。

import docxPreview from 'docx-preview';
import pdfjs from 'pdfjs-dist';

export default {
  name: 'preview',
  props: {
    url: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'docx',
    },
  },
  data() {
    return {
      result: null,
    };
  },
  methods: {
    load() {
      if (this.type === 'docx') {
        docxPreview.load(this.url, {
          renderMode: 'canvas',
          canvasWidth: 800,
          canvasHeight: 600,
        }).then((result) => {
          this.result = result;
        });
      } else if (this.type === 'pdf') {
        pdfjs.getDocument(this.url).then((pdfDocument) => {
          const page = await pdfDocument.getPage(1);
          const canvas = document.getElementById('preview');
          const viewport = page.getViewport({ scale: 1 });
          const context = canvas.getContext('2d');
          page.render({ canvasContext: context, viewport }).promise.then(() => {
            this.result = canvas;
          });
        });
      }
    },
  },
  mounted() {
    this.load();
  },
  render() {
    if (this.result) {
      return <div><canvas ref="preview"></canvas></div>;
    } else {
      return <div>加载中...</div>;
    }
  },
};

将组件注册到vue实例中：

import preview from './preview.vue';

Vue.component('preview', preview);

在页面中使用组件：

<preview url="https://example.com/document.docx"></preview>

即可实现docx、pdf文档的在线预览。