vue中本地pdf文件加载错误，文件不显示

2024-06-09 01:56:30

1.问题描述

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.

2.查看pdf路径和url

pdf文件储存位置如下（错误示范！！！）：

代码写法如下：

data() {return {url: "../showFils/show.pdf  ",pdfSrc:"",title: "建筑工程地下室防水施工技术分析pdf",};},

3.错误分析

（1）在vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地方；

（2）引用时，不能使用相对路径，因为使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。写法：“/static/pdf/show.pdf"，/即表示public文件夹(需略去public)；

4.修改

把pdf文件放到public/static/pdf下，路径写为“/static/pdf/show.pdf"

vue中本地pdf文件加载错误，文件不显示相关推荐

Linux系统安装驱动过程中ko文件加载错误（Required key not available）的解决办法
Linux系统安装驱动过程中ko文件加载错误(Required key not available)的解决办法问题描述在Ubuntu上使用CP210x USB转UART设备时需要安装驱动程序(CP ...
Vue下载本地pdf、word、excel文件
Vue下载本地pdf.word.excel文件项目需求具体实现注意项目需求在项目中需要对pdf.word.excel等文档的下载也就是获取文件的静态路径,下载到本地. 方案 :利用 axi ...
vue中ztree使用懒加载的方法
vue中ztree使用懒加载的方法正常引用过后使用: import tree from "vue-giant-tree"; <tree:setting="sett ...
Vue中如何进行滚动加载与无限滚动？
Vue中如何进行滚动加载与无限滚动? 随着Web应用程序的复杂性和数据量的增加,滚动加载和无限滚动成为了Web开发中常见的需求.在Vue中,我们可以使用一些插件和技术来实现这些功能. 本文将介绍Vue ...
java class文件代码_java_基础——用代码编译.java文件+加载class文件
java_基础--用代码编译.java文件+加载class文件 java_基础--用代码编译.java文件+加载class文件 [简单编译的流程] package com.zjm.www.test; ...
vue中实现图片懒加载的方法（一）
1.背景: 前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载. 2.懒加载的意义图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是 ...
php源码自动识别文本中的链接,自动加载识别文件Auto.php
用于本应用的控制器自动加载类设置,用法如同\CodeIgniter\Config\AutoloadConfig 自动加载识别文件:dayrui/App/应用目录/Config/Auto.php 语法格 ...
vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
vue中element-ui table滚动加载
//1.在main.js里注册Vue.directive('loadmore', {bind(el, binding) {const selectWrap = el.querySelector('.e ...

最新文章

热门文章