vue预览PDF文件的几种方法

在Vue中预览PDF文件，可以使用以下几种方法：

1. 使用<iframe>标签直接嵌入PDF文件。
2. 使用PDF.js库进行渲染。
3. 使用Embedly服务自动生成PDF预览。

方法1：使用<iframe>标签

<template>
  <div>
    <iframe :src="pdfUrl" width="100%" height="600px"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
    };
  },
};
</script>

方法2：使用PDF.js

首先安装PDF.js：

npm install pdfjs-dist

然后在Vue组件中使用：

<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');
        // Fetch the first page of the PDF
        const pageNumber = 1;
        pdf.getPage(pageNumber).then(page => {
          console.log('Page loaded');
          const canvas = this.$refs.pdfCanvas;
          const ctx = canvas.getContext('2d');
          const viewport = page.getViewport({ scale: 1.5 });
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          // Render PDF page into canvas context
          const renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };
          const renderTask = page.render(renderContext);
          renderTask.promise.then(() => {
            console.log('Page rendered');
          });
        });
      }).catch(err => {
        // Handle errors here
        console.error('Error loading PDF: ', err);
      });
    }
  }
};
</script>

方法3：使用Embedly服务

<template>
  <div>
    <div v-html="pdfEmbed"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
      pdfEmbed: '',
    };
  },
  mounted() {
    this.fetchEmbed();
  },
  methods: {
    fetchEmbed() {
      // 使用Embedly服务生成PDF预览
      const url = `https://embed.ly/api/oembed?url=${encodeURIComponent(this.pdfUrl)}&key=YOUR_EMBEDLY_API_KEY`;
      fetch(url)
        .then(response => response.json())
        .then(data => {
          if (data.html) {
            this.pdfEmbed = data.html;
          }
        })
        .catch(error