【问题标题】:error while opening pdf file in vue.js from local project folders从本地项目文件夹中打开 vue.js 中的 pdf 文件时出错
【发布时间】:2020-05-24 16:55:47
【问题描述】:

我正在开发一个投资组合网站,我需要在单击按钮时从本地文件中打开一个 resume.pdf 文件,但我无法使其工作。我正在使用gridsome 和 vue.js。我最初尝试了这段代码:

<a class="cv-button float-right"
              href="../assets/resume.pdf"
              target="_blank">MY CV</a>

但是当我点击链接(按钮)时,我得到了这个错误:

Cannot GET /src/assets/resume.pdf

它去的网址是:

http://localhost:8080/src/assets/resume.pdf

之前有人问过我面临的问题: Opening a PDF file in another window with VueJS 和Open a PDF using VueJS。
我尝试使用提供的解决方案,但它们都没有真正起作用,而且我每次都遇到几乎相同的错误!我加载图像没有问题,但这个 pdf 文件不起作用。该文件位于src -&gt; assets -&gt; resume.pdf。请注意,我尝试了许多打开文件的方法,但都失败了,包括在 javascript 中使用 vue.js methods 和 windos.open() 或 required 关键字或使用不同的方法来提供源文件的路径,例如添加 @987654334 @ ETC。
下面是我的 package.json 文件:

{
  "name": "portfolio.farzinnasiri.com",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.5.0",
    "gridsome": "^0.7.0",
    "vue-typer": "^1.2.0"
  },
  "devDependencies": {
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2"
  }
}

网站预览在这里:http://farzinnasiri.ir。当然我还没有添加pdf文件,但理论上当有人点击MY CV按钮时,他/她应该被引导到浏览器中的简历文件......


最后一件事是我在最终构建的项目(dist 文件夹)中找不到 pdf 文件,所以 vue.js 可能一开始就无法读取文件!
请在这里给我一些帮助。感谢您的关注

【问题讨论】:

标签: vue.js pdf gridsome


【解决方案1】:

好的,所以我解决了gridsome 中的问题,只需将我的pdf 文件放在gridsome 创建项目时创建的static 目录中。 Gridsome 将该文件夹中的所有内容直接放入 dist/ 文件夹中,因此我只需要为其提供如下路径:

<g-link class="cv-button float-right" href="/resume.pdf" target="_blank">MY CV</g-link>

【讨论】:

  • 注意:任何不在static/ 中的东西都将由构建工具编译 - 所以这是正确的方法!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-08-21
  • 1970-01-01
  • 2013-12-06
  • 1970-01-01
  • 2012-09-25
  • 1970-01-01
  • 2018-12-17
相关资源
最近更新 更多