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

使用vue-pdf出现的卡顿,空白,报错,浏览器崩溃解决办法

如果想直接知道解决办法,请翻到最下面

  1. 今天,接到了一个新的需求,我们公司的PDF展示卡住了,导致浏览器直接奔溃。
  2. 我也刚来公司不久,就去看看是怎么发生的,公司前同事用的vue-pdf,刚开始以为是文件太大,加载太快的问题,后面发现是vue-pdf报了一个错误。

RenderingCancelledException:Rendering cancelled, page 1

3.找到问题后,我前往github这个插件的仓库查看,在issue中发现早在三年前已经有小伙伴发现了这个bug,但是直到今天,作者大大也没有解决。

4.其中有小伙伴说可以用分页解决,可是我们公司原先用的就是分页啊,当你点击过快的时候,也会报错。

5.于是,我赶紧去找其他的解决方案,发现iframe可以嵌入展示PDF,而且原生的效果非常好,当我满怀信心,认为小case时,我发现大意了,我们公司的PDF是保密的,是不能被下载的,于是我使用 :

 :src="pdfUrl + '?page=hsn#toolbar=0'"

标记了iframe的src属性,去掉了头部的下载按钮,但是紧接着发现,鼠标右键也能调出。

6.于是我换了一个思路,将div覆盖iframe,然后透明不就可以了吗,但是发现覆盖之后,页面无法滑动,此方案又被pass。

7.最后,我开始使用pdfvuer这个插件 

npm i pdfvuer

8.切记使用v-for循环,不然对于大的pdf文件,还是会很卡,很影响用户体验,但至少不会崩掉

9.引入

import pdfvuer from "pdfvuer";

 components: {

    pdf: pdfvuer

  },

<pdfclass="pdf":src="pdfUrl"v-for="i in pageCount":key="i":page="i"v-if="pdfUrl"></pdf>

10.通过方法获取总页数

// 获取 pdf 信息getPdf(Url) {this.pdfUrl = pdfvuer.createLoadingTask(Url);this.pdfUrl.then(pdf => {console.log("pdf", pdf);this.pageCount = pdf.numPages;this.fullscreenLoading = false;}).catch(err => {console.log(err);});},

11.再添加一个element的加载状态就可以完美解决了,只不过第一次加载可能会有一些慢,但是加载之后就不会卡了 

相关文章:

使用vue-pdf出现的卡顿,空白,报错,浏览器崩溃解决办法

如果想直接知道解决办法&#xff0c;请翻到最下面 今天&#xff0c;接到了一个新的需求&#xff0c;我们公司的PDF展示卡住了&#xff0c;导致浏览器直接奔溃。我也刚来公司不久&#xff0c;就去看看是怎么发生的&#xff0c;公司前同事用的vue-pdf&#xff0c;刚开始以为是文…...

(笔记七)利用opencv进行形态学操作

&#xff08;1&#xff09;程序清单 形态学操作是一种图像处理技术&#xff0c;它基于数学形态学理论&#xff0c;用于改变图像的形状和结构。它主要通过结构元素的腐蚀和膨胀操作来实现。 #!/usr/bin/env python # -*- coding:utf-8 -*- """ author: LIFEI t…...

Spring是什么?

什么是Spring 我知道你现在可能迫不及待地想要开始编写Spring应用了。我向你保证&#xff0c;在本章结束之前&#xff0c;你肯定能够开发一个简单的Spring应用。但首先&#xff0c;我将使用Spring的一些基础概念为你搭建一个舞台&#xff0c;帮助你理解Spring是如何运转起来的…...

电梯SIP-IP五方对讲管理系统

电梯SIP-IP五方对讲管理系统 是深圳锐科达精心打磨的一款IP数字信号对讲设备&#xff0c;是在传统电梯对讲系统基础上的一次全新升级&#xff0c;突破了模拟、FM调频系统存在的技术障碍&#xff0c;实现联网;在模/数交替的过程中&#xff0c;继承了模拟、FM调频系统的优点&…...

leetcode283移动零

题目&#xff1a; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入:…...

Docker 部署SpringBoot项目,使用外部配置文件启动项目

一、Springboot项目引入配置文件的方式&#xff1a; 第一种是在jar包的同一目录下建一个config文件夹&#xff0c;然后把配置文件放到这个文件夹下&#xff1b; 第二种是直接把配置文件放到jar包的同级目录&#xff1b; 第三种在classpath下建一个config文件夹&#xff0c;然后…...

电子半导体行业电能质量监测与治理系统解决方案 安科瑞 许敏

摘要&#xff1a;在国家鼓励半导体材料国产化的政策导向下&#xff0c;本土半导体材料厂商不断提升半导体产品技术水平和研发能力&#xff0c;逐渐打破了国外半导体厂商的垄断格局&#xff0c;推进中国半导体材料国产化进程&#xff0c;促进中国半导体行业的发展。半导体产品的…...

pdfh5在线预览pdf文件

前言 pc浏览器和ios的浏览器都可以直接在线显示pdf文件&#xff0c;但是android浏览器不能在线预览pdf文件&#xff0c;如何预览pdf文件&#xff1f; Github: https://github.com/gjTool/pdfh5 Gitee: https://gitee.com/gjTool/pdfh5 使用pdfh5预览pdf 编写预览页面 <…...

Java智慧工地大数据中心源码

智慧工地技术架构&#xff1a;微服务JavaSpring Cloud VueUniApp MySql 智慧工地形成安全、质量、进度、人员、机械、绿色施工六大针对性解决方案。 安全管理 围绕重大危险源提供管控&#xff0c;可视化跟踪消防、安防、基坑、高支模、临边防护、卸料平台等设施设备的安全状态…...

关于人工智能的担忧

人工智能的快速发展引发了一系列关于其潜在风险和担忧的讨论。以下是一些常见的人们对人工智能的担忧&#xff1a; 失业问题&#xff1a;人工智能的出现可能会导致很多工作岗位的消失&#xff0c;特别是那些需要重复性劳动的工作。人们担心机器取代人类工作将导致大规模失业和社…...

JVM之强软弱虚引用

在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;有几种不同类型的引用&#xff0c;它们分别是&#xff1a;强引用&#xff08;Strong Reference&#xff09;、软引用&#xff08;Soft Reference&#xff09;、弱引用&#xff08;Weak Reference&#xff09;、虚引用&am…...

Python编程练习与解答 练习98:一个数是素数吗

质数是大于1的整数&#xff0c;它只能被1和它本身整除。编写一个函数&#xff0c;来确定他的参数是不是质数&#xff0c;如果是&#xff0c;则返回True&#xff0c;否则返回False。编写一个main程序&#xff0c;从用户那里读取一个整数并显示一条消息&#xff0c;指示它是不是质…...

vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离

vue3tsuniapp实现小程序端input获取焦点计算上推页面距离 input获取焦点计算上推页面距离 1.先说我这边的需求2.发现问题3.解决思路4.代码展示 自我记录 1.先说我这边的需求 需求 1.给键盘同级添加一个按钮例如’下一步’ or ‘确认’ 这种按钮 2.初步想法就是获取input焦点时…...

【2023集创赛】加速科技杯二等奖作品:基于ATE的电源芯片测试设计与性能分析

本文为2023年第七届全国大学生集成电路创新创业大赛&#xff08;“集创赛”&#xff09;加速科技杯二等奖作品分享&#xff0c;参加极术社区的【有奖征集】分享你的2023集创赛作品&#xff0c;秀出作品风采&#xff0c;分享2023集创赛作品扩大影响力&#xff0c;更有丰富电子礼…...

Java入坑之Robot类

一、概述 1.1Robot类概述 在Java中&#xff0c;Robot是一个属于java.awt包的类。它还扩展了 Object 类。该类用于为测试自动化、自运行演示以及需要控制鼠标和键盘的其他应用程序生成本机系统输入事件。换句话说&#xff0c;我们使用 Java Robot 类来触发输入事件&#xff0c;…...

spring-secrity的Filter顺序+自定义过滤器

Filter顺序 Spring Security的官方文档向我们提供了filter的顺序&#xff0c;实际应用中无论用到了哪些&#xff0c;整体的顺序是保持不变的: ChannelProcessingFilter&#xff0c;重定向到其他协议的过滤器。也就是说如果你访问的channel错了&#xff0c;那首先就会在channel…...

leetcode 371. 两整数之和

异或&#xff1a;不同为1&#xff0c;相同为0&#xff0c;刚好符合加法&#xff0c;但是缺少进位的可能 按位与&#xff1a;只有都为1才为1&#xff0c;否则都为0&#xff0c;如果两个数按位与再左移一位&#xff0c;就能代表所有要进位的位 class Solution {public int getS…...

Medium: Where to Define Qualified users in A/B testing?

1. Common AB Testing Setup Issue (Framework) 局限性: unqualified users will also be considered and mess up experimentation results....

POJ 3662 Telephone Lines 二分,最小化第k大的数

一、题目大意 我们有n个点&#xff0c;p条边&#xff0c;最小化从1到n之间的路径的第k1大的数&#xff08;当路径不超过k时就是0&#xff09; 二、解题思路 我们首先用dijkstra过一遍&#xff0c;判断从1能不能到n&#xff0c;不能直接输出-1结束。 1能到达n的话&#xff0…...

【mybatis-plus进阶】多租户场景中多数据源自定义来源dynamic-datasource实现

Springbootmybatis-plusdynamic-datasourceDruid 多租户场景中多数据源自定义来源dynamic-datasource实现 文章目录 Springbootmybatis-plusdynamic-datasourceDruid 多租户场景中多数据源自定义来源dynamic-datasource实现0.前言1. 作者提供了接口2. 基于此接口的抽象类实现自…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...