使用 VueJS 打开 PDF

Question

我希望能够在 VueJS 上打开一个 pdf。 pdf文件是本地的，不能在线。

（我使用的是 Quasar 的按钮，但它的功能与 HTML 按钮相同）

我试过了：

<q-btn id="mebtn" href="../assets/resume.pdf">Click Me</q-btn> 

或者

<input type="button" value="Open" onClick="window.open('../assets/Resume.pdf');

我得到的错误：

无法获取 ../assets/Resume.pdf

我希望能够单击按钮，然后我的 pdf 会在另一个选项卡上弹出

其他正常的 html 解决方案将不起作用

Answer 1

假设你的目录是这样的：

src -> assets --> Resume.pdf

您可以通过以下方式访问它：

<input type="button" value="Open" onClick="readFile()");


methods: {
  readFile() {
     window.open('src/assets/Resume.pdf', '_blank') //to open in new tab
   }
}

Answer 2

使用点击事件、window.open() 和 require。

<span @click="handleClick">a pdf file</span>

handleClick: () => {
  window.open(require('/path/to/my/pdf.pdf'), '_blank)
}

Answer 3

在 VueJS 中，有一个名为“static”或“statics”的文件夹，您只需将文件移动到“statics”即可通过本地目录访问它。