Question

我想创建一个API以使用Vuejs渲染本地pdf文件。我的解决方案是将其嵌入公共文件夹中的HTML中，然后从我的组件中调用该HTML文件。（pdf也在公共文件夹中。）由于我对pdf的打开方式没有特别的期望，因此该系统运行良好。我粘贴了下面的代码。

这是我的工作代码；

在Public / 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>

我还尝试了几个Npm库在Vue中进行pdf渲染。到目前为止没有成功！有没有人有什么建议？预先谢谢你。

Answer 1

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

嵌入标签在Vuejs模板中是否适用于pdf？

1 个答案: