嵌入标签是否适用于 pdf 的 Vuejs 模板？答案

【问题标题】：Does embed tag work in Vuejs template for pdfs?嵌入标签是否适用于 pdf 的 Vuejs 模板？
【发布时间】：2020-04-10 18:46:21
【问题描述】：

我想创建一个 API 来使用 Vuejs 呈现本地 pdf 文件。我的解决方案是将它嵌入到公共文件夹中的 Html 中，然后从我的组件中调用该 Html 文件。（pdf也在公共文件夹中。）而且这个系统运行良好，因为我对pdf打开的方式没有任何具体的期望，只要它打开。我粘贴在下面的代码。

这是我的工作代码；

在公共/myHtml 中：

<body>
  <div class="container">
    <embed src="pdfs/AVV.pdf" type="application/pdf" width="100%" height="1000px" />
  </div>
</body>

以及我在 Vue 中的相关组件：

   <template>
     <a target="_blank" :href="`${publicPath}${filename}.html`">
       {{ hyperlink }}
     </a>
   </template>

   <script>
    export default {
      name: 'myComponent',
      data() {
        return { publicPath: process.env.BASE_URL }
    },
    props: {
      filename: {
        type: String,
        default: ''
      },
      hyperlink: {
        type: String,
        default: ''
      }
    }
  }
</script>

问题是我被告知不要使用公用文件夹并通过 Vue 视图/组件执行相同的操作。但是一旦我在我的 src 文件夹中实现了如下相同的逻辑，它就不起作用了。

这是我的视图/组件中在任何提取之前的新代码，这是正确的方向，但还没有接近工作：

<template>
  <div>
    <embed
      src="./data/pdf/myFile.pdf"
      type="application/pdf"
      width="100%"
      height="1000px"
    />
  </div>
</template>

我还尝试了几个用于在 Vue 中进行 pdf 渲染的 Npm 库。至今没有成功！有没有人有什么建议？提前谢谢你。

【问题讨论】：

标签： vue.js pdf vuejs2 embed

【解决方案1】：

我发现问题不在于嵌入标签。当我将 pdf 文件放回公共文件夹时，我可以将 pdf 文件嵌入到 vue 模板中。当它们在 src 文件夹中时，Vue 似乎找不到它们。对吗？

【讨论】：