当前位置: 首页 > news >正文

uniapp使用H5实现预览pdf文件

在这里插入图片描述
下载后把压缩包解压到自己的项目的static文件夹下的pdf文件下,如图
在这里插入图片描述
新建一个文件名为filePreview.vue

<template><view><web-view :src="allUrl"></web-view></view>
</template><script>export default {data() {return {viewerUrl:'../../static/pdf/web/viewer.html',allUrl: '.'}},onLoad(options) {this.allUrl = `${this.viewerUrl}?file=${options.url}`;// this.allUrl = this.viewerUrl + '?file=' + options.url}}
</script>

在下载文件事件

<view @click=”getContractPdf“>下载文件</view>getContractPdf() {exportContractPdf({id: this.id}).then(res => {this.url = res.datauni.navigateTo({url: '/pages/index/filePreview?url=' + this.url})})},

1.如果预览文件是乱码情况或者在pc上报ocale.properties的请求返回404
解决:就是pdfjs下载版本有问题,下载以前的老版本

2.如果出现跨域问题直接修改源代码在viewer.js中,也可以全局搜素file origin does not match viewer,注释该代码块
解决如下:
在这里插入图片描述

http://www.lryc.cn/news/162854.html

相关文章:

  • Studio 3T for MongoDB的介绍及语法简单介绍
  • MySQL数据库——存储引擎(1)-MySQL体系结构、存储引擎简介
  • 211. 添加与搜索单词 - 数据结构设计
  • 【深度学习】You Only Segment Once: Towards Real-Time Panoptic Segmentation,YOSO全景分割
  • ping与Traceroute是如何工作的
  • CentOS Python环境搭建
  • 亚马逊云科技与伊克罗德推出AI绘画解决方案——imAgine
  • 机器学习课后习题 --- 逻辑回归
  • 软件设计师学习笔记9-进程调度
  • 09:STM32-------USART串口通信+串口数据包
  • “安全即服务”为网络安全推开一道门
  • vue3的生命周期
  • [E2E Test] Python Behave Selenium 一文学会自动化测试
  • Knowledge Graph Prompting for Multi-Document Question Answering
  • ElMessageBox.prompt 点击确认校验成功后关闭
  • 调整Windows11桌面图标间隔
  • Spring最佳实践: 构建高效可维护的Java应用程序
  • stable diffusion webui中的sampler
  • MySQL表的内连和外连
  • StatefulSets In K8s
  • leetcode刷题笔记——单调栈
  • 关于 ogbg-molhi数据集的个人解析
  • RabbitMQ:hello结构
  • SpringBoot整合Redis 并 展示使用方法
  • js中如何实现字符串去重?
  • Axure RP仿QQ音乐app高保真原型图交互模板源文件
  • 2023牛客暑假多校第四场(补题向题解:J)
  • 第 362 场 LeetCode 周赛题解
  • C++ if 语句
  • 业务安全及实战案例