如何在VueJS页面中渲染本地PDF文件？

问题核心：Vue开发环境下，直接引用本地PDF文件路径会被webpack/vite解析为网络请求（指向localhost:port），若文件未放在正确的静态资源目录或未正确配置资源加载规则，就会出现404或无法渲染的情况。以下是可行的解决方法：

1. 利用公共静态资源目录（最简单直接） #

将PDF文件放在Vue项目的public目录（Vue3/Vite）或static目录（Vue2）下，这些目录的文件会被直接复制到打包后的根目录，不经过webpack编译处理。引用时使用绝对路径即可：

<template>
  <!-- 使用embed标签渲染 -->
  <embed src="/my-portfolio.pdf" type="application/pdf" width="100%" height="800px" />
  
  <!-- 或使用iframe -->
  <iframe src="/my-portfolio.pdf" width="100%" height="800px" frameborder="0"></iframe>
</template>

2. 配置webpack加载PDF文件（自定义资源目录） #

如果希望将PDF放在src/assets等自定义目录，需在vue.config.js中配置file-loader处理PDF文件：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('pdf')
      .test(/\.pdf$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: '[name].[ext]', // 保留原文件名
        outputPath: 'assets/pdfs/' // 打包后输出的目录
      })
  }
}

之后在组件中通过import引入并使用：

<template>
  <embed :src="pdfUrl" type="application/pdf" width="100%" height="800px" />
</template>

<script>
// 引入本地PDF文件
import portfolioPdf from '@/assets/pdfs/portfolio.pdf'

export default {
  data() {
    return {
      pdfUrl: portfolioPdf
    }
  }
}
</script>

3. Vite项目的特殊处理 #

如果是Vue3 + Vite项目，除了放在public目录用绝对路径引用外，也可以直接在组件中通过new URL()构造正确路径：

<template>
  <iframe :src="pdfUrl" width="100%" height="800px"></iframe>
</template>

<script setup>
const pdfUrl = new URL('./assets/portfolio.pdf', import.meta.url).href
</script>

4. 小文件替代方案：BASE64嵌入 #

对于较小的PDF文件，可以将其转换为BASE64字符串，直接嵌入到页面中，避免路径解析问题：

<template>
  <embed :src="pdfBase64Src" type="application/pdf" width="100%" height="800px" />
</template>

<script setup>
// 替换为你自己的PDF BASE64字符串
const pdfBase64 = 'JVBERi0xLjMKJcfsj6IKNSAwIG9iago8PC9MZW5ndGggNiAwIFIvRmlsdGVyIC9GbGF0ZURlY29kZT4+CnN0cmVhbQp4nE2NuwoCQQxF+/mKx8tNcEUSMhBQnG7sRDCQEHLgU3L4U1Q6fK...'
const pdfBase64Src = `data:application/pdf;base64,${pdfBase64}`
</script>

注意：大文件不推荐此方法，会显著增加打包体积和页面加载时间。

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