VueJS中pdf-viewer-vue组件无法使用本地文件路径作为source的解决咨询

首先纠正你代码里的拼写错误：puclic应该是public，这个小疏漏也会导致路径失效。

针对你的情况，有两种简单可行的解决办法：

方法一：使用public文件夹的根路径访问 #

Vue项目中，public文件夹是静态资源的根目录，打包后里面的文件会直接放在项目根目录下，不需要用相对路径，直接用根路径即可：

<PDFViewer
    source="/file.pdf"
    style="max-height: 780px; max-width: 1108px"
    @download="handleDownload"
/>

如果你的项目部署在子路径下（比如https://xxx.com/xxx/），可以结合Vue的环境变量确保路径正确：

<PDFViewer
    source=`${process.env.BASE_URL}file.pdf`
    style="max-height: 780px; max-width: 1108px"
    @download="handleDownload"
/>

方法二：将PDF转换为Base64格式 #

如果根路径访问还是有问题，可以把public里的PDF文件转换成Base64字符串，直接作为source传入：

1. 用本地Base64转换工具（比如Node脚本或离线转换工具）把file.pdf转成Base64编码
2. 将编码后的字符串赋值给变量，传入组件：

<template>
  <PDFViewer
      source="data:application/pdf;base64,xxxxxx..."
      style="max-height: 780px; max-width: 1108px"
      @download="handleDownload"
  />
</template>

<script setup>
// 也可以把Base64字符串放在单独的js文件里导入
// import pdfBase64 from './pdf-base64.js'
</script>

另外，如果你把PDF放在src/assets文件夹下，还可以用require导入获取URL：

<PDFViewer
    source="require('@/assets/file.pdf')"
    style="max-height: 780px; max-width: 1108px"
    @download="handleDownload"
/>

不过这种方式需要确保webpack能正确处理PDF文件，Vue CLI项目一般默认支持。

内容的提问来源于stack exchange，提问作者Killian Pierce