如何使用 VueJS 在页面中渲染 pdf？

Question

我正在尝试为某人构建一个作品集网站，但无法在网络应用程序或新选项卡中呈现 pdf。 pdf 文件是本地的，因此没有与访问相关的后端。

<template> <embed src="/public/pdfs/myPdf.pdf" type="application/pdf" /> </template>

这种代码不起作用，我也尝试过 iframe 和各种声称可以渲染 pdf 的模块（例如 jspdf-dist 或 VuePDF）。

问题似乎出在文件的获取上。 Vue 似乎不会尝试获取本地文件，而是访问 localhost:port/path/to/files 来获取它们。我应该如何处理这个问题？

Answer 1

您可以将 pdf 文件放入

src

文件夹并导入到组件中，如下所示。

<template>
  <div>
    <embed style="width: 100vw; height: 100vh" :src="pdf" />
  </div>
</template>

<script setup>
import pdf from "../assets/sample.pdf";
</script>

演示 https://gn33f4.csb.app/