Vue3 PDF预览和打印最详细教程，小白也能轻松上手

2023-02-06 04:29:15

利用 Vue3 实现 PDF 预览和打印功能

简介

PDF 是当今工作和生活中广泛应用的文档格式。借助 Vue3 和 vue-pdf-embed 库，我们可以轻松地将 PDF 预览和打印功能集成到我们的应用程序中。

安装 vue-pdf-embed

npm install vue-pdf-embed

使用 vue-pdf-embed

在 Vue 组件中，我们可以使用 <pdf-embed> 标签嵌入 PDF 文件。此标签接受以下属性：

src: PDF 文件的 URL 或路径
width: PDF 文件的宽度
height: PDF 文件的高度
toolbar: 是否显示工具栏
controls: 是否显示控制栏
zoom: PDF 文件的缩放比例

示例：

<template>
  <div>
    <pdf-embed
      :src="pdfUrl"
      width="100%"
      height="600px"
      toolbar
      controls
      zoom="1.5"
    />
  </div>
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed';

export default {
  components: {
    PdfEmbed: VuePdfEmbed,
  },
  data() {
    return {
      pdfUrl: 'https://example.com/my-pdf.pdf',
    };
  },
};
</script>

打印 PDF

vue-pdf-embed 也支持 PDF 打印功能。要打印 PDF，我们可以使用 <pdf-embed> 标签的 print 方法。

示例：

<template>
  <div>
    <pdf-embed
      :src="pdfUrl"
      width="100%"
      height="600px"
      toolbar
      controls
      zoom="1.5"
    >
      <button @click="printPdf">打印</button>
    </pdf-embed>
  </div>
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed';

export default {
  components: {
    PdfEmbed: VuePdfEmbed,
  },
  data() {
    return {
      pdfUrl: 'https://example.com/my-pdf.pdf',
    };
  },
  methods: {
    printPdf() {
      this.$refs.pdfEmbed.print();
    },
  },
};
</script>