从本地项目文件夹打开 vue.js 中的 pdf 文件时出错
error while opening pdf file in vue.js from local project folders
我在投资组合网站上工作,我需要在单击按钮时从本地文件打开一个 resume.pdf
文件,但我无法使其工作。我正在使用 gridsome
和 vue.js。我最初尝试了这段代码:
<a class="cv-button float-right"
href="../assets/resume.pdf"
target="_blank">MY CV</a>
但是当我点击 link(按钮)时,我得到了这个错误:
Cannot GET /src/assets/resume.pdf
它去的 url 是:
http://localhost:8080/src/assets/resume.pdf
之前有人问过我面临的问题:
Opening a PDF file in another window with VueJS
和 。
我尝试使用提供的解决方案,但 none 确实有效,而且我每次都遇到几乎相同的错误!我加载图像没有问题,但这个 pdf 文件不起作用。该文件位于 src -> assets -> resume.pdf
。请注意,我尝试了很多打开文件的方法但都失败了,包括在 javascript 或 required
关键字中使用 vue.js methods
和 windos.open()
或使用不同的方式给出源文件的路径,例如添加 @/assets/resume.pdf
等。
下面是我的 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
按钮时,he/she 应该被定向到浏览器中的简历文件...
最后一件事是我在最终构建的项目(dist
文件夹)中找不到 pdf 文件,所以可能 vue.js 无法读取文件第一名!
请在这里给我一些帮助。感谢您的关注
好的,所以我解决了 gridsome
中的问题,只需将我的 pdf 文件放在 gridsome
创建项目时创建的 static
目录中。 Gridsome 将该文件夹中的所有内容直接放入 dist/
文件夹,所以我只需要给它一个路径,如:
<g-link class="cv-button float-right" href="/resume.pdf" target="_blank">MY CV</g-link>
我在投资组合网站上工作,我需要在单击按钮时从本地文件打开一个 resume.pdf
文件,但我无法使其工作。我正在使用 gridsome
和 vue.js。我最初尝试了这段代码:
<a class="cv-button float-right"
href="../assets/resume.pdf"
target="_blank">MY CV</a>
但是当我点击 link(按钮)时,我得到了这个错误:
Cannot GET /src/assets/resume.pdf
它去的 url 是:
http://localhost:8080/src/assets/resume.pdf
之前有人问过我面临的问题:
Opening a PDF file in another window with VueJS
和
我尝试使用提供的解决方案,但 none 确实有效,而且我每次都遇到几乎相同的错误!我加载图像没有问题,但这个 pdf 文件不起作用。该文件位于 src -> assets -> resume.pdf
。请注意,我尝试了很多打开文件的方法但都失败了,包括在 javascript 或 required
关键字中使用 vue.js methods
和 windos.open()
或使用不同的方式给出源文件的路径,例如添加 @/assets/resume.pdf
等。
下面是我的 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
按钮时,he/she 应该被定向到浏览器中的简历文件...
最后一件事是我在最终构建的项目(dist
文件夹)中找不到 pdf 文件,所以可能 vue.js 无法读取文件第一名!
请在这里给我一些帮助。感谢您的关注
好的,所以我解决了 gridsome
中的问题,只需将我的 pdf 文件放在 gridsome
创建项目时创建的 static
目录中。 Gridsome 将该文件夹中的所有内容直接放入 dist/
文件夹,所以我只需要给它一个路径,如:
<g-link class="cv-button float-right" href="/resume.pdf" target="_blank">MY CV</g-link>