『VUE H5页面 - PDF预览』

  • 使用依赖:vue-pdf
  • 实现需求:将 PDF url 地址 转换为本地页面预览
<template><div class="pdf-preview"><NavBar /><div class="container"><VuePdf v-for="i in numPages" :key="i" class="pdf" :src="src" :page="i"></VuePdf></div></div>
</template><script>
import { Toast } from 'vant'
export default {name: 'PdfPreview',components: {VuePdf: () => import(/* webpackChunkName: "vue-pdf-component" */ 'vue-pdf'),},props: {},data() {return {pdfUrl: '', //      pdf在线地址numPages: '', //    页数src: '',}},created() {this.pdfUrl = this.$route.query.pdfUrlthis.loadingPDF(this.pdfUrl)},methods: {// 具体用法参考:https://github.com/FranckFreiburger/vue-pdf#readmeasync loadingPDF(url) {if (!url) returntry {const { default: pdf } = await import(/* webpackChunkName: "vue-pdf-method" */ 'vue-pdf')this.src = pdf.createLoadingTask(url)this.src.promise.then(pdf => {this.numPages = pdf.numPages}).catch(error => Toast(error.message))} catch (error) {console.info(error)}},},
}
</script><style lang="scss" scoped>
.pdf-preview {width: 100%;height: 100%;.container {width: 100%;height: calc(100% - #{$vue-container-top-height});background: #f5f5f5;position: relative;overflow-y: scroll;.pdf {width: 100%;&:not(:last-child) {margin-bottom: 10px;}}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/126977.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 Python 进行自然语言处理第 5 部分:文本分类

一、说明 关于文本分类&#xff0c;文章已经很多&#xff0c;本文这里有实操代码&#xff0c;明确而清晰地表述这种过程&#xff0c;是实战工程师所可以参照和依赖的案例版本。 本文是 2023 年 1 月的 WomenWhoCode 数据科学跟踪活动提供的会议系列文章中的一篇。 之前的文章在…

B. Stone Age Problem -思维

题面 分析 操作的题永远没有思路。。。这题难就难在不知道如何在O(1)的时间复杂度实现改变整个数组&#xff0c;可以设两个变量k, t&#xff0c;k来表示每次改变整个数组后的值x&#xff0c;t记录每次改变后的第几次查询&#xff0c;设数组b表示第i个元素最近一次改变值是第几…

android services

Service 介绍 代码参考https://github.com/Jkoala/koala_android/tree/main/service_demo Service不同于后台线程它是跟Activity一个层级的 Service 使用 创建 创建一个自定义Service 继承Service重写onCreate onBind onStartCommand在Mainfest.xml 注册我们的Service 启动…

【深度学习基础】专业术语汇总(欠拟合和过拟合、泛化能力与迁移学习、调参和超参数、训练集、测试集和验证集)

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

linux的环境安装以及部署前后端分离后台接口

⭐⭐ linux专栏&#xff1a;linux专栏 ⭐⭐ 个人主页&#xff1a;个人主页 目录 一.linux安装环境 1.1 jdk和tomcat的安装配置 1.1.1 解压jdk和tomcat的安装包 解压jdk安装包 解压tomcat安装包 1.2 jdk环境变量配置 1.3 tomcat启动 1.4 MySQL的安装 二.部署前后端分离…

LuatOS-SOC接口文档(air780E)--mqtt - mqtt客户端

常量 常量 类型 解释 mqtt.STATE_DISCONNECT number mqtt 断开 mqtt.STATE_SCONNECT number mqtt socket连接中 mqtt.STATE_MQTT number mqtt socket已连接 mqtt连接中 mqtt.STATE_READY number mqtt mqtt已连接 mqttc:subscribe(topic, qos) 订阅主题 参数 …

机器学习快速入门教程 Scikit-Learn实现

机器学习是什么? 机器学习是一帮计算机科学家想让计算机像人一样思考所研发出来的计算机理论。他们曾经说过,人和计算机其实本没有差别,同样都是一大批互相连接的信息传递和存储元素所组成的系统。所以有了这样的想法,加上他们得天独厚的数学功底,机器学习的前身也就孕育而生…

746. 使用最小花费爬楼梯

给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 示例 1&#xff…

RHCSA -- VMware虚拟机配置及破解密码

一、配置虚拟机 1、开启VMware&#xff08;自定义&#xff09; 2、设置虚拟机硬件兼容性&#xff08;默认&#xff09; 3、稍后安装虚拟机操作系统 4、选择为Linux的虚拟机 5、虚拟机机名 6、设置虚拟机处理器 7、设置虚拟机所连接的网络类型 8、选择磁盘类型 9、设置所选磁…

【源码】医院绩效考核系统-对接HIS核算

医院绩效考核系统&#xff0c;它需要和his系统进行对接&#xff0c;按照设定周期&#xff0c;从his系统获取医院科室和医生、护士、其他人员工作量&#xff0c;对没有录入信息化系统的工作量&#xff0c;绩效考核系统设有手工录入功能&#xff08;可以批量导入&#xff09;&…

CSS标点符号换行问题

最近遇到一个奇怪的现象,元素中中文文本正常显示,但是加了一堆符号后中文文本居然换行了. div{width: 200px;border: 1px solid blue;word-break: break-all;} <div>文本</div>经过研究发现&#xff0c;因为标点符号不允许出现在行首和行尾&#xff0c;连带着符号…

Kafka - 监控工具 Kafka Eagle:实时洞察Kafka集群的利器

文章目录 引言Kafka Eagle简介Kafka Eagle的特点Kafka Eagle的优势使用Kafka Eagle的步骤结论 引言 在现代大数据架构中&#xff0c;Apache Kafka已成为一个不可或缺的组件&#xff0c;用于可靠地处理和传输大规模的数据流。然而&#xff0c;随着Kafka集群规模的不断增长&…

第十四节——计算属性computed

一、概念 如果一个属性是由其他属性计算而来的&#xff0c;这个属性依赖其他属性&#xff0c;是一个多对一或者一对一&#xff0c;一般用computed computed 属性值会默认走缓存&#xff0c;计算属性是基于它们的响应式依赖进行缓存的&#xff0c;也就是基于data中声明过或者父…

QT基础学习笔记

文章目录 1 概述1.1 优点1.2 QT成功使用案例1.3 安装教程1.3.1 在线安装流程1.3.2 离线安装流程 2 创建工程2.1 快捷键2.1.1 常用快捷键2.1.2 修改快捷键 2.2 proj文件 3 对象树4 信号和槽4.1 自定义信号和槽4.1.1 信号连接信号4.1.2 一个信号连接多个槽函数4.1.3 多个信号连接…

【人工智能Ⅰ】4-蚁群算法

【人工智能Ⅰ】4-蚁群算法 文章目录 【人工智能Ⅰ】4-蚁群算法4.1 群智能概述群群智能 4.2 蚁群算法ACO概念特征 4.3 ACO伪代码4.4 TSP问题中的应用【1】初始化【2】选择路径【3】更新信息【4】输出结果 4.5 ACO基本思想4.6 关键参数选取4.7 算法参数设计策略组合参数设计策略终…

算法---缺失的第一个正数

题目 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。示例 1&#xff1a;输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 示例 2&#xff1a;输入&#xff1a;nums …

C++数据结构算法篇Ⅰ

C数据结构算法篇Ⅰ &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;C算法 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 主要内容讲解数据结构中的链表结构 文章目录 C数据…

WSL安装Ubuntu

先安装wsl2 安装Ubuntu 打开windows商店&#xff0c;搜索对应版本的Ubuntu&#xff0c;点击获取进度跑完后&#xff0c;点击打开&#xff0c;就可以完成安装 删除Ubuntu版本 wsl --unregister Ubuntu-18.04安装位置迁移 正常情况下Ubuntu是被安装在C盘&#xff0c;我们需要…

什么是数字展览馆,数字展览馆有什么应用前景

引言&#xff1a; 数字展览馆作为一种新兴的文化艺术展示形式&#xff0c;以数字化技术和虚拟现实为基础&#xff0c;正在逐渐改变传统展览的方式。 一、什么是数字展览馆&#xff1f; 1.定义 数字展览馆是利用数字技术和虚拟现实技术打造的一种线上文化艺术展示平台。通过虚…

@reduxjs/toolkit配置react-redux解决createStore或将在未来被淘汰警告

通常 我们用redux都需要通过 createStore 但目前 你去用它 基本都会被划线 甚至有点厉害的的编辑器 他会直接告诉你这个东西基本快被弃用了 这个应该大家都知道 最好不要用已经被明确未来或弃用的语法 因为一旦弃用这个系统就需要维护 而且说 一般会被淘汰的语法 本身也就是有…