当前位置: 首页 > 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,注释该代码块
解决如下:
在这里插入图片描述

相关文章:

uniapp使用H5实现预览pdf文件

下载后把压缩包解压到自己的项目的static文件夹下的pdf文件下&#xff0c;如图 新建一个文件名为filePreview.vue <template><view><web-view :src"allUrl"></web-view></view> </template><script>export default {dat…...

Studio 3T for MongoDB的介绍及语法简单介绍

用法介绍 Studio 3T是一款用于MongoDB数据库管理和开发的图形化工具&#xff0c;它提供了许多功能来简化MongoDB的操作和开发过程。以下是一些常见的Studio 3T用法&#xff1a; 连接到MongoDB服务器&#xff1a; 打开Studio 3T并创建一个新连接配置。输入MongoDB服务器的主机名…...

MySQL数据库——存储引擎(1)-MySQL体系结构、存储引擎简介

目录 MySQL体系结构 连接层 服务层 引擎层 存储层 存储引擎简介 概念 语句 演示 下面开始学习进阶篇的第一个内容——存储引擎 分为四点学习&#xff1a; MySQL体系结构存储引擎简介存储引擎特点存储引擎选择 MySQL体系结构 连接层 最上层是一些客户端和链接服务&am…...

211. 添加与搜索单词 - 数据结构设计

211. 添加与搜索单词 - 数据结构设计 class WordDictionary { public:struct Node{Node *node[26];bool is_end;Node(){is_endfalse;for(int i0;i< 26;i){node[i]NULL;}}};Node *root;WordDictionary() {root new Node();}void addWord(string word) {auto p root;for(aut…...

【深度学习】You Only Segment Once: Towards Real-Time Panoptic Segmentation,YOSO全景分割

论文&#xff1a;https://arxiv.org/abs/2303.14651 代码&#xff1a;https://github.com/hujiecpp/YOSO 文章目录 Abstract1. Introduction2. Related Work3. Method3.1. Task Formulation3.2. Feature Pyramid Aggregator3.3. Separable Dynamic Decoder 4. Experiments4.1. …...

ping与Traceroute是如何工作的

ping 是基于 ICMP 协议工作的。ICMP 全称 Internet Control Message Protocol&#xff0c;就是互联网控制报文协议。 ICMP 报文是封装在 IP 包里面的。因为传输指令的时候&#xff0c;肯定需要源地址和目标地址。它本身非常简单。 ICMP 报文有很多的类型&#xff0c;不同的类型…...

CentOS Python环境搭建

安装依赖 yum install -y libffi-devel wget gcc make zlib-devel openssl openssl-devel ncurses-devel openldap-devel gettext bzip2-devel xz-devel下载安装包 wget "https://www.python.org/ftp/python/3.9.10/Python-3.9.10.tar.xz" 编译安装 # 3.1、解压安装包…...

亚马逊云科技与伊克罗德推出AI绘画解决方案——imAgine

在过去的数月中&#xff0c;亚马逊云科技已经推出了多篇介绍如何在亚马逊云科技上部署Stable Diffusion&#xff0c;或是如何结合Amazon SageMaker与Stable Diffusion进行模型训练和推理任务的内容。 为了帮助客户快速、安全地在亚马逊云科技上构建、部署和管理应用程序&#x…...

机器学习课后习题 --- 逻辑回归

&#xff08;一&#xff09;单选题 1.一监狱人脸识别准入系统用来识别待进入人员的身份&#xff0c;此系统一共包括识别4种不同的人员&#xff1a;狱警&#xff0c;小偷&#xff0c;送餐员&#xff0c;其他。下面哪种学习方法最适合此种应用需求&#xff1a; A:二分类问题 …...

软件设计师学习笔记9-进程调度

目录 1. PV操作 1.1进程的同步与互斥 1.1.1互斥 1.1.2同步 1.2 PV操作 1.2.1信号量 1.2.2 PV操作的概念 2.信号量与PV操作 2.1 PV操作与互斥模型 2.2 PV操作与同步模型 2.3 互斥与同步模型结合 3.前趋图与PV操作 1. PV操作 1.1进程的同步与互斥 1.1.1互斥 互斥&…...

09:STM32-------USART串口通信+串口数据包

目录 一:串口协议 1:通信接口 2:串口通信 3:硬件电路 4:电平标准 5:串口参数及其时序 二:USART介绍 1:简历 2:USART框图 3:USART的基本结构 4:数据帧 5: 波特率发生器 6:数据模式 三:案例 A:串口发送--单发送 1:连接图 2:函数介绍 3:代码 B:串口发送接收 1…...

“安全即服务”为网络安全推开一道门

8月30日&#xff0c;三六零&#xff08;下称“360”&#xff09;集团发布了2023年半年报&#xff0c;其中安全业务第二季度收入6.54亿元&#xff0c;同比增长98.76%&#xff0c;环比增长157.16%&#xff0c;安全第二增长曲线已完全成型&#xff01;特别值得一提的是&#xff0c…...

vue3的生命周期

1.vue3生命周期官方流程图 2.vue3中的选项式生命周期 vue3中的选项式生命周期钩子基本与vue2中的大体相同&#xff0c;它们都是定义在 vue实例的对象参数中的函数&#xff0c;它们在vue中实例的生命周期的不同阶段被调用。生命周期函数钩子会在我们的实例挂载&#xff0c;更新…...

[E2E Test] Python Behave Selenium 一文学会自动化测试

前言 本文将使用Python Behave与Selenium&#xff0c;和同学们一起认识自动化测试&#xff0c;并附上完整的实践教程。 项目源码已上传&#xff1a;CSDN 郭麻花 Azure Repo python-behave-selenium 核心概念 1. 什么是E2E Test E2E即End-to-end&#xff0c;意思是从头到尾…...

Knowledge Graph Prompting for Multi-Document Question Answering

本文是LLM系列文章&#xff0c;针对《Knowledge Graph Prompting for Multi-Document Question Answering》的翻译。 多文档问答中的知识图谱提示 摘要1 引言2 符号3 知识图谱构建4 LM引导的图形遍历器5 实验6 相关工作7 结论 摘要 大型语言模型的“预训练、提示、预测”范式…...

ElMessageBox.prompt 点击确认校验成功后关闭

ElMessageBox.prompt(, 验证取货码, {inputPattern: /^.{1,20}$/,inputErrorMessage: 请输入取货码,inputPlaceholder: 请输入取货码,beforeClose: (action, instance, done) > {if (action confirm) {if (instance.inputValue) {let flag false;if (flag) {done()} else …...

调整Windows11桌面图标间隔

调整Windows11桌面图标间隔 WinR 快捷键如何使用 在Windows系统中&#xff0c;通过 WinR 的快捷键可以快速打开Windows系统的“运行”窗口&#xff0c;然后在这里输入相应的命令就可以快速执行指定的任务。 具体的操作方法是&#xff0c;同时按下键盘上的Windows键和R键即可。…...

Spring最佳实践: 构建高效可维护的Java应用程序

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

stable diffusion webui中的sampler

Stable Diffusion-采样器篇 - 知乎采样器&#xff1a;Stable Diffusion的webUI中&#xff0c;提供了大量的采样器供我们选择&#xff0c;例如Eular a&#xff0c; Heum&#xff0c;DDIM等&#xff0c;不同的采样器之间究竟有什么区别&#xff0c;在操作时又该如何进行选择&…...

MySQL表的内连和外连

文章目录 MySQL表的内连和外连1. 内连接(1) 显示SMITH的名字和部门名称 2. 外连接2.1 左外连接(1) 查询所有学生的成绩&#xff0c;如果这个学生没有成绩&#xff0c;也要将学生的个人信息显示出来 2.2 右外连接(1) 对stu表和exam表联合查询&#xff0c;把所有的成绩都显示出来…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...