vue直接打开public(本地)文件下的pdf文件方式
vue直接打开public(本地)文件下的pdf文件
方法一
把文件话在public文件夹下，我的文件名为 exam.pdf
在vue.config.js里面配置，publicPath: ‘/public/’
最后在我们的代码中直接window.open就可以打开此文件了,也可以用a链接的，href中的地址写“/public/wxam.pdf”,或者embed、iframe等都可以。
注意 2 中的public，和 3 中的public 名字是对应的，两个命名要一致
方法二
最简单的方法就是直接写路径，如下图，不需要配置publicPath
window.open('/exam.pdf') // 直接写成这样的地址
//window.open('../../public/exam.pdf'),这样写是打不开的，不能写成相对路径vue本地pdf文件加载错误，文件不显示
问题描述
Warning: getHexString - ignoring invalid character: 33
Warning: getHexString - ignoring invalid character: 79
Warning: getHexString - ignoring invalid character: 84
Warning: getHexString - ignoring invalid character: 89
Warning: getHexString - ignoring invalid character: 80
Warning: getHexString - ignoring additional invalid characters.
查看pdf路径和url
pdf文件储存位置如下（错误示范！！！）：
代码写法如下：
data() {
return {
url: "../showFils/show.pdf ",
pdfSrc:"",
title: "建筑工程地下室防水施工技术分析pdf",
};
},错误分析
（1）在vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地方；
（2）引用时，不能使用相对路径，因为使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。写法：“/static/pdf/show.pdf"，/即表示public文件夹(需略去public)；
修改
把pdf文件放到public/static/pdf下，路径写为“/static/pdf/show.pdf"
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue中,自定义指令提供了一种机制来直接操作DOM元素,或者在元素的生命周期中注入特定的行为,自定义指令可以封装复杂的DOM操作,使得它们可以像内置指令一样被复用和维护,本文将介绍如何在Vue中注册和使用自定义指令,需要的朋友可以参考下2025-05-05
这篇文章主要为大家介绍了vue中v-if和v-show使用区别源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
在vxe-table中,可通过cell-style或cell-class-name设置单元格垂直对齐,使用verticalAlign: top实现顶部对齐,默认为垂直居中,合并单元格时同样支持此设置,本文给大家介绍vxe-table 设置单元格垂直对齐的方法,感兴趣的朋友一起看看吧2025-06-06
文章讲解Vue2中使用Swiper组件的实现步骤,包括版本适配、组件结构搭建、依赖安装、ESLint配置、数据加载与图片路径处理,以及响应式样式设置,确保组件正常运行,感兴趣的朋友跟随小编一起看看吧2025-07-07
最近在学习Vue,感觉methods还是有必有总结一下的,下面这篇文章主要给大家介绍了关于3分钟迅速学会Vue中methods方法使用技巧的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue函数@click.prevent的使用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue仿支付宝支付功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
这篇文章主要介绍了vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了vue内置组件keep-alive事件动态缓存实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
学过 vue2 的小伙伴们肯定学习过侦听器，主要是用来监听页面数据或者是路由的变化，来执行相应的操作，在 vue3里面呢，也有侦听器的用法，功能基本一样,本文就来为大家详细讲讲2022-07-07
最新评论