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

vue2 pdf 链接地址打开

vue2 pdf 链接地址打开

1、先下载依赖

“vue-pdf”: “^4.3.0”,
“pdfh5”: “^1.4.0”,
“pdfjs-dist”: “2.5.207”,

3、打开pdf

<template><div id="app"><div id="demo"></div></div>
</template>
<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
export default {data() {return {pdfh5: null,PDFsrc: this.$route.query.url,};},mounted() {//实例化this.pdfh5 = new Pdfh5("#demo", {pdfurl: this.PDFsrc,});//监听完成事件this.pdfh5.on("complete", function(status, msg, time) {console.log("状态:" +status +",信息:" +msg +",耗时:" +time +"毫秒,总页数:" +this.totalNum);});},
};
</script><style>
* {padding: 0;margin: 0;
}
html,
body,
#app {width: 100%;height: 100%;
}
#demo {height: 90vh;overflow: hidden;overflow-y: scroll;
}
</style>

相关文章:

vue2 pdf 链接地址打开

vue2 pdf 链接地址打开 1、先下载依赖 “vue-pdf”: “^4.3.0”, “pdfh5”: “^1.4.0”, “pdfjs-dist”: “2.5.207”, 3、打开pdf <template><div id"app"><div id"demo"></div></div> </template> <script&g…...

c# 动态lambda实现二级过滤(多种参数类型)

效果 调用方法 实体类&#xff08;可以根据需求更换&#xff09; public class ToolStr50 {public bool isSelected { get; set; }public string toolStr1 { get; set; }public string toolStr2 { get; set; }public string toolStr3 { get; set; }public string toolStr4 { …...

34.Redis事务

1.事务Redis介绍 事务表示一组动作&#xff0c;要么全部执行&#xff0c;要么全部不执行。 例如微博粉丝关注用户&#xff0c;博主粉丝列表增加了用户&#xff0c;粉丝关注列表增加了博主&#xff1b; Redis 提供了简单的事务功能&#xff0c;将一组需要一起执行的命令放到mult…...

认识类和对象

认识类 类是用来对一个实体 ( 对象 ) 来进行描述的&#xff0c;主要描述该实体(对象)具有哪些属性(外观尺寸等)&#xff0c;哪些功能(用来干啥) 类中包含的内容称为 类的成员。属性主要是用来描述类的&#xff0c;称之为 类的成员属性或者 类成员变量。方法主要说明类具有哪些功…...

解决echarts桑基图为0时tooltip不显示的问题

关键代码 formatter: function (params) {console.log("params",params)if (params.value 0) {// 如果值为0&#xff0c;返回空字符串&#xff0c;不显示任何内容return params.name : params.value;// return ;} else {// 否则返回标准的格式化信息return par…...

vue3 基础笔记

基础模板语法 //1. 普通文本插值: <p>{{ rawHtml }}</p>//2. v-html 指令&#xff1a;插入 HTML 内容&#xff0c;并希望 Vue 将其视为 HTML 而不是纯文本 <p v-html"rawHtml"></p> let rawHtml <span>这是一个 <b>HTML</…...

Oracle 第30章:最佳实践与案例研究

在《Oracle最佳实践与案例研究》第30章中&#xff0c;我们探讨了实际项目中的经验分享以及解决常见问题的技巧。这一章节旨在通过具体的案例来说明如何在Oracle数据库管理和开发中应用最佳实践。下面我将从几个方面进行详细介绍&#xff0c;并提供一些源代码示例。 1. 性能优化…...

第九周预习报告

文章目录 第九周预习报告学习内容AI 对学习内容的总结章节概述内容总结 对知识总结的反思思维导图基于AI的学习知识点1&#xff1a;系统调用知识点2&#xff1a;进程控制 学习实践过程遇到的问题与解决方式问题1&#xff1a;fork() 调用后&#xff0c;子进程和父进程同时运行导…...

【分享】这篇教程助力你成为 JavaScript 糕手!(四)

第四章&#xff1a;运算符与表达式 4.1 算术运算符 加法运算符&#xff08;&#xff09;&#xff1a;用于数字相加&#xff0c;如console.log(5 3);结果为8。 当用于字符串时&#xff0c;它表示字符串拼接。例如console.log(‘Hello’ ‘world’);输出Hello world。如果一个操…...

双亲委派模型的破坏

双亲委派模型的第一次“被破坏”其实发生在双亲委派模型出现之前--即JDK1.2发布之前。由于双亲委派模型是在JDK1.2之后才被引入的,而类加载器和抽象类java.lang.ClassLoader则是JDK1.0时候就已经存在,面对已经存在 的用户自定义类加载器的实现代码,Java设计者引入双亲委派模…...

Android关机流程知多少?

在 Android 中&#xff0c;关机流程涉及系统各个组件的协同工作&#xff0c;确保设备在断电之前能够安全地关闭所有活动并保存数据。以下是 Android 系统中关机流程的详细介绍&#xff1a; 1. 用户触发关机请求 关机流程由用户的操作触发&#xff0c;通常有以下几种方式&#…...

深入理解指针end(总结篇)

如果有不会的智识点&#xff0c;请移动到博主前四篇指针博客&#xff01; 可以当一个指针智商检阅博客看。 看看你是否掌握了这些知识 1&#xff1a;内存&#xff0c;指针变量 内存单元的编号地址指针&#xff1b; 指针变量和其他变量没有区别&#xff0c;指针变量是来存放…...

C# 程序暂停的两种方式

C# 程序暂停的两种方式&#xff1a;EventWaitHandle 与 volatile bool pause 在C#中&#xff0c;线程控制是多线程编程的重要组成部分&#xff0c;其中实现暂停的需求经常出现。本文将详细探讨使用EventWaitHandle和设置volatilebool来实现线程暂停的不同方式&#xff0c;它们…...

【LeetCode】【算法】160.相交链表

Leetcode 160. 相交链表 题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 思路 AB&#xff0c;一个指针&#xff0c;访问完A访问B&#xff1b;另一个指针&#…...

光伏破局 引领能源革命

为进一步推进商业信用体系建设&#xff0c;促进企业诚实守信经营&#xff0c;面向企业普及诚信与品牌建设的意义&#xff0c;指导企业加强诚信品牌建设&#xff0c;提升其整体竞争力&#xff0c;“崛起的民族品牌”专题系列节目以诚信为内涵&#xff0c;在全国范围内遴选出有行…...

Jenkins声明式Pipeline流水线语法示例

系列文章目录 docker搭建Jenkins2.346.3版本及常用工具集成配置(ldap、maven、ansible、npm等) docker安装低版本的jenkins-2.346.3,在线安装对应版本插件失败的解决方法 文章目录 系列文章目录jenkins流水线基础1、pipeline1.1、什么是pipeline&#xff1f;1.2、为什么使用pi…...

互联网技术净土?原生鸿蒙开启全新技术征程

鸿蒙生态与开发者的崭新机会 HarmonyOS NEXT承载着华为对未来操作系统的深刻理解&#xff0c;如今已发展为坚实的数字底座。它不仅在技术层面取得了全面突破&#xff0c;还在中国操作系统市场中站稳了脚跟。 当前&#xff0c;HarmonyOS NEXT的代码行数已超过1.1亿&#xff0c…...

关于Django 模型字段 `choices`自定义数据类型的枚举——补充

文章目录 1. 处理 datetime 类型的 choices2. 处理 time 类型的 choices3. 处理 Decimal 类型的 choices4. 处理 UUID 类型的 choices5. 处理 float 类型的 choices 在 Choices 类的基础上扩展&#xff0c;可以将 choices 与特定数据类型&#xff08;如 date 或 datetime&a…...

CAP理论的延申--BASE理论

上一篇文章我简单介绍了一下什么是CAP理论&#xff0c;本篇文章讲解一下随着技术的演变&#xff0c;CAP理论是如何发展为BASE理论的。 CAP理论回顾 首先我们回顾一下CAP理论&#xff0c;CAP理论指得是分布式系统发生网络等故障时&#xff0c;不同节点之间无法同步数据&#xf…...

【傻呱呱】phpMyAdmin怎样给特定用户授权特定数据库权限?

前期准备 phpMyAdmin数据库&#xff08;MySQL&#xff09; END...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...