Vue做docx/pdf/excle 文件预览

Vue本身不支持直接在浏览器中预览.docx, .pdf, 或 .excle 文件，因为这些文件格式不是纯文本，而是二进制格式。要在Vue应用中预览这些文件，通常需要使用第三方库或者将文件转换为可在浏览器中查看的格式，例如将.docx转换为PDF，然后使用PDF.js等库来展示。

以下是一个简单的例子，展示如何使用PDF.js在Vue中预览PDF文件：

1. 安装PDF.js:

npm install pdfjs-dist

2. 在Vue组件中使用PDF.js来预览PDF:

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import pdfjsLib from 'pdfjs-dist/build/pdf';
 
export default {
  props: ['pdfUrl'],
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      loadingTask.promise.then(pdf => {
        console.log('PDF loaded');
        this.renderPage(pdf, 1);
      }).catch(err => {
        console.error('Error loading PDF: ', err);
      });
    },
    renderPage(pdf, pageNumber) {
      pdf.getPage(pageNumber).then(page => {
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = this.$refs.pdfCanvas;
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext).promise.then(() => {
          console.log('Page rendered');
        });
      }).catch(err => {
        console.error('Error rendering page: ', err);
      });
    }
  }
};
</script>

在这个例子中，我们创建了一个简单的Vue组件，它接受一个pdfUrl属性，该属性是要预览的PDF文件的网络地址