Vue3和Vue2pdf预览与切换，放大与缩小，打印

**Vue3 和 Vue2 的 PDF 预览与切换、放大与缩小、打印**

在实际的开发中，我们经常需要处理 PDF 文件的预览、切换、放大、缩小以及打印等功能。虽然这不是一个复杂的问题，但如果没有合适的解决方案，可能会导致代码冗余和维护困难。在本文中，我们将介绍如何在 Vue3 和 Vue2 中实现这些功能。

### 一. PDF 预览首先，我们需要选择一个合适的 PDF 预览组件。这里我们使用 `pdfjs-dist` 库，它提供了一个轻量级的 PDF 视图器，可以很好地支持 PDF 文件的预览。

#### 安装依赖

bashnpm install pdfjs-dist

#### 使用示例

html<template>
 <div>
 <input type="file" @change="handleFileChange">
 <button @click="previewPdf">预览</button>
 <button @click="printPdf">打印</button>
 <button @click="zoomIn">放大</button>
 <button @click="zoomOut">缩小</button>
 </div>
</template>

<script>
import pdfjs from 'pdfjs-dist';

export default {
 data() {
 return {
 pdfFile: null,
 pdfViewer: null }
 },
 methods: {
 handleFileChange(e) {
 this.pdfFile = e.target.files[0];
 },
 previewPdf() {
 if (this.pdfFile) {
 const pdfUrl = URL.createObjectURL(this.pdfFile);
 this.pdfViewer = new pdfjs.PDFViewer();
 this.pdfViewer.loadDocument(pdfUrl);
 document.body.appendChild(this.pdfViewer);
 }
 },
 printPdf() {
 if (this.pdfViewer) {
 this.pdfViewer.print();
 }
 },
 zoomIn() {
 if (this.pdfViewer) {
 this.pdfViewer.zoom(1.2);
 }
 },
 zoomOut() {
 if (this.pdfViewer) {
 this.pdfViewer.zoom(0.8);
 }
 }
 }
}
</script>

### 二. PDF 切换在上面的示例中，我们使用 `pdfjs-dist` 库来实现 PDF 预览功能。现在，我们需要添加一个切换按钮，允许用户切换到不同的 PDF 文件。

#### 添加切换按钮

html<template>
 <div>
 <!-- ... -->
 <button @click="switchPdf">切换</button>
 </div>
</template>

<script>
// ...
methods: {
 // ...
 switchPdf() {
 if (this.pdfFile) {
 const newPdfUrl = URL.createObjectURL(this.pdfFile);
 this.pdfViewer.loadDocument(newPdfUrl);
 }
 }
}
</script>

### 三. PDF 打印在上面的示例中，我们使用 `pdfjs-dist` 库来实现 PDF 预览功能。现在，我们需要添加一个打印按钮，允许用户打印当前的 PDF 文件。

#### 添加打印按钮

html<template>
 <div>
 <!-- ... -->
 <button @click="printPdf">打印</button>
 </div>
</template>

<script>
// ...
methods: {
 // ...
 printPdf() {
 if (this.pdfViewer) {
 this.pdfViewer.print();
 }
 }
}
</script>

### 四. PDF 放大和缩小在上面的示例中，我们使用 `pdfjs-dist` 库来实现 PDF 预览功能。现在，我们需要添加两个按钮，允许用户放大或缩小当前的 PDF 文件。

#### 添加放大和缩小按钮

html<template>
 <div>
 <!-- ... -->
 <button @click="zoomIn">放大</button>
 <button @click="zoomOut">缩小</button>
 </div>
</template>

<script>
// ...
methods: {
 // ...
 zoomIn() {
 if (this.pdfViewer) {
 this.pdfViewer.zoom(1.2);
 }
 },
 zoomOut() {
 if (this.pdfViewer) {
 this.pdfViewer.zoom(0.8);
 }
 }
}
</script>

通过以上的步骤，我们可以在 Vue3 和 Vue2 中实现 PDF 预览、切换、放大和缩小以及打印等功能。