vue-pdf 组件的 source 属性 与 src属性的却别

`vue-pdf` 组件的 `source` 属性和 `src` 属性都用于指定要加载的 PDF 文件，但它们之间有几个关键的区别：

1. 数据类型不同：`source` 属性可以接受多种类型的数据，例如 URL、Blob、ArrayBuffer 等，而 `src` 属性只能接受字符串类型的 URL。

2. 加载方式不同：`source` 属性可以通过多种方式加载 PDF 数据，例如从 URL 加载、从 Blob 对象加载、从 ArrayBuffer 对象加载等；而 `src` 属性只能从 URL 加载 PDF 数据。

3. 兼容性不同：`source` 属性兼容性更好，可以在更多的浏览器和环境中使用，而 `src` 属性可能会受到跨域等限制。

综上所述，如果要加载本地的 PDF 文件或从非 URL 数据源加载 PDF 数据，我们应该使用 `source` 属性。如果要加载远程的 PDF 文件，可以使用 `src` 属性。

相关问题

vue-pdf-embed

vue-pdf-embed是一个Vue组件，用于在页面中嵌入PDF文件。根据引用[1]和引用[2]的代码片段，可以看出在使用vue-pdf-embed时，需要先安装该组件并在页面中引入。然后，在Vue实例的components选项中注册VuePdfEmbed组件。在模板中使用vue-pdf-embed标签，并通过source属性指定PDF文件的来源。可以通过设置pdfSrc属性来指定PDF文件的base64编码字符串，或者通过接口获取文件流并将其转换为base64编码字符串。通过设置page属性可以指定要显示的页码范围。在代码中还可以看到一些其他的逻辑，例如获取PDF文件和控制显示的逻辑。总之，vue-pdf-embed是一个方便的工具，可以帮助我们在Vue应用中嵌入和显示PDF文件。

VUE中使用vue-pdf

在Vue中使用vue-pdf组件可以在页面上展示PDF文件。首先，需要在页面中引入vue-pdf组件并安装它。可以通过以下方式引入和安装vue-pdf组件：

import pdf from "vue-pdf";

components: {
  pdf
}

npm install --save vue-pdf

然后，在模板中使用vue-pdf组件来展示PDF文件。以下是一个示例代码：

<template>
  <div class="container">
    <button @click="openpdf">打开pdf</button>
    <pdf @closepdf="closepdf" v-model="isshowpdf" :pdfurl="src" @pdferr="pdferr" :maxscale='4' :minscale='0.6' :scale='1.0'></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data () {
    return {
      src: '/static/test1.pdf',
      isshowpdf: false
    }
  },
  methods: {
    closepdf () {
      this.isshowpdf = false
    },
    pdferr (errurl) {
      console.log(errurl)
    },
    openpdf () {
      this.isshowpdf = true
    }
  }
}
</script>

<style scoped>
.container {
  font-family: PingFang SC;
  width: 100%;
}
</style>

在这个示例中，通过点击按钮可以打开PDF文件，并在页面上展示。同时，还可以设置PDF文件的最大缩放比例、最小缩放比例和默认缩放比例。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue使用vue-pdf](https://blog.csdn.net/hzqzzz/article/details/125294482)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [【Vue】vue中使用pdf，看这篇就够了~](https://blog.csdn.net/weixin_42678675/article/details/109736497)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]