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

技术掉:PDF显示,使用pdf.js

PDF 显示

场景: 其实直接显示 pdf 可以用 iframe 标签,但产品觉得浏览器自带的 pdf 预览太丑了,而且无法去除那些操作栏。

解决方案:使用 pdf.js 进行显示

第一步:引入 pdf.js

去官网下载稳定版的 pdf.js 文件

在这里插入图片描述

然后将下载好的文件放进项目的静态文件夹,我用的是 vite 项目,所以是 public

在这里插入图片描述

第二步:在页面中引入 viewer.html

<iframeclass="iframe1":src="'/public/pdf/web/viewer.html?file=xxxxxxx'"frameborder="0"width="100%"height="100%"
></iframe>

filte 是你的 pdf 的路径,本地路径和 url 路径都是可以的

设置好之后就可以预览了

效果如下:

在这里插入图片描述

遇到的问题

pdf 跨域

首先此插件跨域的话会报错,需要注释掉部分代码

/pdf/web/viewer.js

在这里插入图片描述

注释掉之后就可以解决了

更改 pdf 样式

直接去修改 viewer.html 里面的代码就行了

相关文章:

技术掉:PDF显示,使用pdf.js

PDF 显示 场景&#xff1a; 其实直接显示 pdf 可以用 iframe 标签&#xff0c;但产品觉得浏览器自带的 pdf 预览太丑了&#xff0c;而且无法去除那些操作栏。 解决方案&#xff1a;使用 pdf.js 进行显示 第一步&#xff1a;引入 pdf.js 去官网下载稳定版的 pdf.js 文件 然后…...

有关pytorch的一些总结

Tensor 含义 张量&#xff08;Tensor&#xff09;&#xff1a;是一个多维数组&#xff0c;它是标量、向量、矩阵的高维拓展。 创建 非随机创建 1.用数组创建 将数组转化为tensor np.ones([a,b]) 全为1 #首先导入PyTorch import torch#数组创建 import numpy as np anp.arr…...

基础IO【Linux】

文章目录&#xff1a;文件相关知识C语言文件IOstdin & stdout & stderr系统文件 IOopenclosewriteread文件描述符文件描述符的分配规则重定向dup2系统调用FILEFILE中的文件描述符FILE中的缓冲区理解文件相关知识 文件 文件内容 文件属性&#xff08;每一个已经存在的…...

Vue3——自定义封装上传图片样式

自定义封装上传图片样式 一、首先需要新建一个自组建完善基础的结构&#xff0c;我这里起名为ImgUpload.vue <el-upload name"file" :show-file-list"false" accept".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP" :multiple"…...

ChatGLM-6B (介绍以及本地部署)

中文ChatGPT平替——ChatGLM-6BChatGLM-6B简介官方实例本地部署1.下载代码2.通过conda创建虚拟环境3.修改代码4.模型量化5.详细代码调用示例ChatGLM-6B 简介 ChatGLM-6B 是一个开源的、支持中英双语问答的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&…...

react的基础使用

react中为什么使用jsxReact 认为渲染逻辑本质上与其他 UI 逻辑内在耦合&#xff0c;比如&#xff0c;在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI&#xff0c;以及需要在 UI 中展示准备好的数据。react认为将业务代码和数据以及事件等等 需要和UI高度耦合…...

letcode 4.寻找两个正序数组的中位数(官方题解笔记)

题目描述 给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 1.二分查找 1.1思路 时间复杂度&#xff1a;O(log(mn)) 空间复杂度&#xff1a;O(1) 给定…...

【面试题系列】K8S常见面试题

目录 序言 问题 1. 简单说一下k8s集群内外网络如何互通的吧 2.描述一下pod的创建过程 3. 描述一下k8s pod的终止过程 4.Kubernetes 中的自动伸缩有哪些方式&#xff1f; 5.Kubernetes 中的故障检测有哪些方式&#xff1f; 6.Kubernetes 中的资源调度有哪些方式&#xff…...

字符函数和字符串函数(上)-C语言详解

CSDN的各位友友们你们好,今天千泽为大家带来的是C语言中字符函数和字符串函数的详解,掌握了这些内容能够让我们更加灵活的运用字符串,接下来让我们一起走进今天的内容吧!写这篇文章需要在cplusplus.com上大量截图,十分不易!如果对您有帮助的话希望能够得到您的支持和帮助,我会持…...

全连接神经网络

目录 1.全连接神经网络简介 2.MLP分类模型 2.1 数据准备与探索 2.2 搭建网络并可视化 2.3 使用未预处理的数据训练模型 2.4 使用预处理后的数据进行模型训练 3. MLP回归模型 3.1 数据准备 3.2 搭建回归预测网络 1.全连接神经网络简介 全连接神经网络(Multi-Layer Percep…...

深度学习目标检测ui界面-交通标志检测识别

深度学习目标检测ui界面-交通标志检测识别 为了将算法封装起来&#xff0c;博主尝试了实验pyqt5的上位机界面进行封装&#xff0c;其中遇到了一些坑举给大家避开。这里加载的训练模型参考之前写的博客&#xff1a; 自动驾驶目标检测项目实战(一)—基于深度学习框架yolov的交通…...

ubuntu不同版本的源(换源)(镜像源)(lsb_release -c命令,显示当前系统的发行版代号(Codename))

文章目录查看unbuntu版本名&#xff08;lsb_release -c命令&#xff09;各个版本源代号&#xff08;仅供参考&#xff0c;具体代号用上面命令查&#xff09;各版本软件源Ubuntu20.10阿里源&#xff1a;清华源&#xff1a;Ubuntu20.04阿里源&#xff1a;清华源&#xff1a;Ubunt…...

linux入门---程序翻译的过程

我们在vs编译器中写的代码按下ctrl f5就可以直接运行起来&#xff0c;并且会将运行的结果显示到显示器上&#xff0c;这里看上去只有一个步骤但实际上这里会存在很多的细节&#xff0c;比如说生成结果在这里插入代码片之前我们的代码会经过预处理&#xff0c;编译&#xff0c;汇…...

springboot复习(黑马)

学习目标基于SpringBoot框架的程序开发步骤熟练使用SpringBoot配置信息修改服务器配置基于SpringBoot的完成SSM整合项目开发一、SpringBoot简介1. 入门案例问题导入SpringMVC的HelloWord程序大家还记得吗&#xff1f;SpringBoot是由Pivotal团队提供的全新框架&#xff0c;其设计…...

C++指针详解

旧文更新&#xff1a;两三年的旧文了&#xff0c;一直放在电脑里&#xff0c;现在直接传上CSDN 一、指针的概念 1.1 指针 程序运行时每个变量都会有一块内存空间&#xff0c;变量的值就存放在这块空间中。程序可以通过变量名直接访问这块空间内的数据&#xff0c;这种访问方…...

tauri+vite+vue3开发环境下创建、启动运行和打包发布

目录 1.创建项目 2.安装依赖 3.启动项目 4.打包生成windows安装包 5.安装打包生成的安装包 1.创建项目 运行下面命令创建一个tauri项目 pnpm create tauri-app 我创建该项目时的node版本为16.15.0 兼容性注意 Vite 需要 Node.js 版本 14.18&#xff0c;16。然而&#x…...

安卓进阶系列-系统基础

文章目录计算机结构冯诺依曼结构哈弗结构冯诺依曼结构与哈弗结构对比安卓采用的架构安卓操作系统进程间通讯&#xff08;IPC&#xff09;内存共享linux内存共享安卓内存共享管道Unix Domain Socket同步常见同步机制信号量Mutex管程安卓同步机制安卓中的Mutex安卓中的ConditionB…...

10 Wifi网络的封装

概述 Wifi有多种工作模式,比如:STA模式、AccessPoint模式、Monitor模式、Ad-hoc模式、Mesh模式等。但在IPC设备上,主要使用STA和AccessPoint这两种模式。下面分别进行介绍。 STA模式:任何一种无线网卡都可以运行在此模式,这种模式也是无线网卡的默认模式。在此模式下,无线…...

手把手的教你安装PyCharm --Pycharm安装详细教程(一)(非常详细,非常实用)

简介 Jetbrains家族和Pycharm版本划分&#xff1a; pycharm是Jetbrains家族中的一个明星产品&#xff0c;Jetbrains开发了许多好用的编辑器&#xff0c;包括Java编辑器&#xff08;IntelliJ IDEA&#xff09;、JavaScript编辑器&#xff08;WebStorm&#xff09;、PHP编辑器&…...

开发板与ubantu文件传送

接下来的所以实验都通过下面这种方式发送APP文件到开发板运行 目录 1、在ubantu配置 ①在虚拟机上添加一个桥接模式的虚拟网卡 ②设定网卡 ③在网卡上配置静态地址 2、开发板设置 ①查看网卡 ②配置网卡静态ip 3、 测试 ①ping ②文件传送 传送报错情况 配置环境&#…...

如何成为一名优秀的网络安全工程师?

前言 这是我的建议如何成为网络安全工程师&#xff0c;你应该按照下面顺序学习。 简要说明 第一件事你应该学习如何编程&#xff0c;我建议首先学python&#xff0c;然后是java。 &#xff08;非必须&#xff09;接下来学习一些算法和数据结构是很有帮助的&#xff0c;它将…...

面试问题之高并发内存池项目

项目部分 1.这个项目是什么? 高并发内存池的原型是谷歌一个开源项目&#xff0c;tcmalloc&#xff0c;而这个项目&#xff0c;就是tcmalloc中最核心的框架和部分拿出来进行模拟。他的作用就是在去代替原型的内存分配函数malloc和free。这个项目涉及的技术有&#xff0c;c&…...

如果阿里巴巴给蒋凡“百亿补贴”

出品 | 何玺 排版 | 叶媛 2021底&#xff0c;阿里内部进行组织架构大调整&#xff0c;任命蒋凡为阿里海外商业负责人&#xff0c;分管全球速卖通和国际贸易&#xff08;ICBU&#xff09;两个海外业务&#xff0c;以及Lazada等面向海外市场的多家子公司。 一年时间过去&#x…...

Linux版本现状

Linux的发行版本可以大体分为两类&#xff0c;一类是商业公司维护的发行版本&#xff0c;一类是社区组织维护的发行版本&#xff0c;前者以著名的Red Hat&#xff08;RHEL红帽&#xff09;为代表&#xff0c;后者以Debian为代表。Red HatRedhat&#xff0c;应该称为Redhat系列&…...

Winform中实现保存配置到文件/项目启动时从文件中读取配置(序列化与反序列化对象)

场景 Winform中实现序列化指定类型的对象到指定的Xml文件和从指定的Xml文件中反序列化指定类型的对象&#xff1a; Winform中实现序列化指定类型的对象到指定的Xml文件和从指定的Xml文件中反序列化指定类型的对象_winform xml序列化_霸道流氓气质的博客-CSDN博客 上面讲的序…...

基于python的超市历年数据可视化分析

人生苦短 我用python Python其他实用资料:点击此处跳转文末名片获取 数据可视化分析目录人生苦短 我用python一、数据描述1、数据概览二、数据预处理0、导入包和数据1、列名重命名2、提取数据中时间&#xff0c;方便后续分析绘图三、数据可视化1、美国各个地区销售额的分布&…...

GPT-4技术报告

摘要 链接&#xff1a;https://cdn.openai.com/papers/gpt-4.pdf 我们汇报了GPT-4的发展&#xff0c;这是一个大规模的多模态模型&#xff0c;可以接受图像和文本输入并产生文本输出。虽然在许多现实场景中&#xff0c;GPT-4的能力不如人类&#xff0c;但它在各种专业和学术基…...

前端性能优化

总结 使用打包工具对代码进行打包压缩&#xff1b;引入css时采用link标签&#xff0c;并放入头部&#xff0c;使其与文档一起加载&#xff0c;减少页面卡顿时间&#xff1b;尽量减少dom结构的重排和重绘&#xff1b;使用css雪碧图&#xff0c;减少网络请求&#xff1b;对不同分…...

尚医通-(三十三)就诊人管理功能实现

目录&#xff1a; &#xff08;1&#xff09;前台用户系统-就诊人管理-需求说明 &#xff08;2&#xff09;就诊人管理-接口开发-列表接口 &#xff08;3&#xff09;就诊人管理-接口开发-其他接口 &#xff08;4&#xff09;前台用户系统-就诊人管理-前端整合 &#xff0…...

《Spring Boot 趣味实战课》读书笔记(二)

牛刀小试——五分钟入门 Spring Boot 万物皆可 Hello World 创建一个 Web 工程 填写项目信息 选择依赖 从 IDEA 打开下载好的 Spring Boot 工程&#xff1a; 完成核心代码 创建 HelloController 类并编写 hello 方法 创建一个 HelloController 类&#xff0c;或者选择 Fi…...

如何做网站淘宝客/培训机构招生方案模板

首先&#xff0c;是曾经的讲师LH大佬的模板 主要涉及了常用的文件头以及一些常用语句和函数的缩写 #include<cstdio> #include<iostream> #include<cstdlib> #include<iomanip> #include<cmath> #include<cstring> #include<string>…...

wordpress只显示文章标题摘要/百度云引擎搜索

我们知道SQL Server和Oracle其实很多原理都类似.特别是一些常用的SQL语句都是按照标准来.所以它们也可以有一定的互操作性的.这里讲一下,怎么配置让SQL Server连接一个Oracle.然后你在SQL Server中也能查看Oracle中表的内容. 我先说下我使用的环境: 操作系统: win7 64 ,SQL …...

男女做暧昧小视频网站/公司网站开发费用

英文名称&#xff1a;TCO-PEG3-FITC 中文名称&#xff1a;反式环辛烯-三聚乙二醇-荧光素 分子式&#xff1a;C38H43N3O10S 分子量&#xff1a;733.83 纯度 gt;95% 外观&#xff1a;黄色固体 储存条件&#xff1a;-20C&#xff0c;避光避湿 用途&#xff1a;仅供科研使用…...

什么网站可以做数据调查/企业品牌推广方案

package code.test;import java.util.Comparator; import java.util.Iterator; import java.util.PriorityQueue; import java.util.Queue;/*** 实验表明&#xff0c;在java中&#xff1a;* 1.toString()方法或迭代元素&#xff1a;优先级队列打印或者迭代&#xff0c;得到的输…...

网站建设赚钱么/网站备案是什么意思

此文转载自&#xff1a;https://blog.csdn.net/vivid117/article/details/110871426#commentBoxAMBA总线协议(六)—— 一文看懂 AXI3 协议 原子访问 2 AMBA总线协议(一)—— 一文看懂APB总线协议AMBA总线协议(二)—— 一文看懂AMBA2 AHB2与AMBA3 AHB-Lite总线协议的区别AMBA总线…...

医疗器械网站制作/seo关键词是怎么优化的

歌曲和歌词放在同一目录下&#xff0c;再上传到网易云网盘&#xff0c;同时要满足以下条件&#xff1a; 1.歌词和歌名必须完全一致&#xff0c;除了后缀名。 2.歌词为lrc后缀文件&#xff0c;且有时间轴。&#xff08;没有时间轴就不会滚动歌词&#xff0c;这个我还没试过。&…...