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"

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。