Vue3 + Vue-PDF 实现PDF 文件在线预览实战

让我为你详细讲解如何使用Vue3和Vue-PDF实现PDF文件在线预览。

1. 安装依赖

首先，我们需要创建一个Vue3项目，并安装Vue-PDF的依赖。

vue create vue-pdf-demo
cd vue-pdf-demo
npm install vue-pdf --save

2. 引入PDF文件

接下来，在Vue组件中引入要预览的PDF文件。

<template>
  <div>
    <vue-pdf :src="pdfUrl"></vue-pdf>
  </div>
</template>

<script>
import { VuePdf } from 'vue-pdf';

export default {
  name: 'PdfViewer',
  components: {
    VuePdf
  },
  data() {
    return {
      pdfUrl: 'https://example.com/test.pdf'
    };
  }
};
</script>

在上面的示例中，我们使用了Vue-PDF组件和ES6模块引入方式，在data属性中使用了一个pdfUrl来存储PDF文件的URL地址。

3. 加载PDF文件

接下来，我们需要在mounted钩子中加载PDF文件，并将PDF文件的数据传递给Vue-PDF组件。

<template>
  <div>
    <vue-pdf :src="pdfData"></vue-pdf>
  </div>
</template>

<script>
import { VuePdf } from 'vue-pdf';
import axios from 'axios';

export default {
  name: 'PdfViewer',
  components: {
    VuePdf
  },
  data() {
    return {
      pdfData: null,
      pdfUrl: 'https://example.com/test.pdf'
    };
  },
  mounted() {
    axios.get(this.pdfUrl, { responseType: 'arraybuffer' })
      .then(response => {
        this.pdfData = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

在上面的示例中，我们使用axios库来发送一个GET请求，获取PDF文件并转换成二进制数据。然后，将PDF文件数据赋值给pdfData属性，最后将pdfData属性绑定给Vue-PDF组件的src属性，即可实现PDF文件在线预览。

示例1：PDF文件预览

在我们已经完成了Vue-PDF组件的使用之后，我们可以在Vue项目中实现PDF文件在线预览。下面是一个PDF文件预览的示例：

<template>
  <div>
    <vue-pdf :src="pdfData"></vue-pdf>
  </div>
</template>

<script>
import { VuePdf } from 'vue-pdf';
import axios from 'axios';

export default {
  name: 'PdfViewer',
  components: {
    VuePdf
  },
  data() {
    return {
      pdfData: null,
      pdfUrl: 'https://example.com/test.pdf'
    };
  },
  mounted() {
    axios.get(this.pdfUrl, { responseType: 'arraybuffer' })
      .then(response => {
        this.pdfData = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

示例2：PDF文件预览与下载

在第一个示例中，我们实现了PDF文件在线预览。接下来，我们可以在Vue项目中实现PDF文件预览与下载。下面是一个PDF文件预览与下载的示例：

<template>
  <div>
    <vue-pdf :src="pdfData"></vue-pdf>
    <button @click="downloadPdf">下载PDF</button>
  </div>
</template>

<script>
import { VuePdf } from 'vue-pdf';
import axios from 'axios';

export default {
  name: 'PdfViewer',
  components: {
    VuePdf
  },
  data() {
    return {
      pdfData: null,
      pdfUrl: 'https://example.com/test.pdf'
    };
  },
  mounted() {
    axios.get(this.pdfUrl, { responseType: 'arraybuffer' })
      .then(response => {
        this.pdfData = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    downloadPdf() {
      const blob = new Blob([this.pdfData], { type: 'application/pdf' });
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'test.pdf';
      link.click();
    }
  }
};
</script>

在上面的示例中，我们在Vue-PDF组件下面添加了一个“下载PDF”按钮，并在methods属性下添加了一个downloadPdf方法，用于将PDF文件保存到本地。在downloadPdf方法中，我们首先将PDF文件数据转换成一个Blob对象，并将Blob URL赋值给a标签的href属性，最后调用click方法触发下载。