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 名字是對(duì)應(yīng)的，兩個(gè)命名要一致
方法二
最簡(jiǎn)單的方法就是直接寫路徑，如下圖，不需要配置publicPath
window.open('/exam.pdf') // 直接寫成這樣的地址
//window.open('../../public/exam.pdf'),這樣寫是打不開的，不能寫成相對(duì)路徑vue本地pdf文件加載錯(cuò)誤，文件不顯示
問(wèn)題描述
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文件儲(chǔ)存位置如下（錯(cuò)誤示范?。。。?/p>
代碼寫法如下：
data() {
return {
url: "../showFils/show.pdf ",
pdfSrc:"",
title: "建筑工程地下室防水施工技術(shù)分析pdf",
};
},錯(cuò)誤分析
（1）在vue項(xiàng)目中，讀取本地的pdf文件需要放到public下static文件夾中，不能放在別的地方；
（2）引用時(shí)，不能使用相對(duì)路徑，因?yàn)槭褂胮ublic文件下面的資源，是不會(huì)被webpack處理的，它們會(huì)被直接復(fù)制到最終的打包目錄下面，且必須使用絕對(duì)路徑來(lái)引用這些文件。寫法：“/static/pdf/show.pdf"，/即表示public文件夾(需略去public)；
修改
把pdf文件放到public/static/pdf下，路徑寫為“/static/pdf/show.pdf"
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中,自定義指令提供了一種機(jī)制來(lái)直接操作DOM元素,或者在元素的生命周期中注入特定的行為,自定義指令可以封裝復(fù)雜的DOM操作,使得它們可以像內(nèi)置指令一樣被復(fù)用和維護(hù),本文將介紹如何在Vue中注冊(cè)和使用自定義指令,需要的朋友可以參考下2025-05-05
這篇文章主要為大家介紹了vue中v-if和v-show使用區(qū)別源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vxe-table 設(shè)置單元格垂直對(duì)齊的方法
在vxe-table中,可通過(guò)cell-style或cell-class-name設(shè)置單元格垂直對(duì)齊,使用verticalAlign: top實(shí)現(xiàn)頂部對(duì)齊,默認(rèn)為垂直居中,合并單元格時(shí)同樣支持此設(shè)置,本文給大家介紹vxe-table 設(shè)置單元格垂直對(duì)齊的方法,感興趣的朋友一起看看吧2025-06-06
文章講解Vue2中使用Swiper組件的實(shí)現(xiàn)步驟,包括版本適配、組件結(jié)構(gòu)搭建、依賴安裝、ESLint配置、數(shù)據(jù)加載與圖片路徑處理,以及響應(yīng)式樣式設(shè)置,確保組件正常運(yùn)行,感興趣的朋友跟隨小編一起看看吧2025-07-07
3分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧
最近在學(xué)習(xí)Vue,感覺(jué)methods還是有必有總結(jié)一下的,下面這篇文章主要給大家介紹了關(guān)于3分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue函數(shù)@click.prevent的使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue仿支付寶支付功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
vue2 mint-ui loadmore實(shí)現(xiàn)下拉刷新,上拉更多功能
這篇文章主要介紹了vue2 mint-ui loadmore實(shí)現(xiàn)下拉刷新,上拉更多功能,需要的朋友可以參考下2018-03-03
vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
學(xué)過(guò) vue2 的小伙伴們肯定學(xué)習(xí)過(guò)偵聽器，主要是用來(lái)監(jiān)聽頁(yè)面數(shù)據(jù)或者是路由的變化，來(lái)執(zhí)行相應(yīng)的操作，在 vue3里面呢，也有偵聽器的用法，功能基本一樣,本文就來(lái)為大家詳細(xì)講講2022-07-07