Vue 的 PDF 文档嵌入组件 - vue-pdf-embed

Vue 的 PDF 文档嵌入组件 - vue-pdf-embed
插件名称 vue-pdf-embed
发布时间 2022年1月21日
插件作者 hrynko

一个 Vue 3/2 组件,用于将 PDF 文档嵌入到您的应用程序中。

安装和下载:

# Yarn
$ yarn add vue-pdf-embed

# NPM
$ npm i vue-pdf-embed

使用:

1. 导入并注册组件。

// VUE 3
import VuePdfEmbed from 'vue-pdf-embed'
// VUE 2
import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
export default {
  components: {
    VuePdfEmbed,
  },
  // ...
})

2. 在您的应用程序中嵌入 PDF。

<vue-pdf-embed :source="mysource" />

3. 设置要显示的页数。

<vue-pdf-embed :page="10" :source="mysource" />
export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      mySource: '<PDF-URL>',
      // 或 based64 数据
      mySource: {
        data: atob('<BASE64-ENCODED-PDF>'),
      },
    }
  }
})

4. 事件。

  • @loading-failed: 加载文档失败
  • @password-requested: 显示文档需要重试标志密码
  • @rendering-failed:无法渲染文档
  • @rendered:完成渲染文档