vueshowpdf 移动端pdf文件预览

1、安装

npm install vueshowpdf -S

2、参数

属性说明类型默认值
v-model是否显示pdf--
pdfurlpdf的文件地址String-

scale

默认放大倍数

Number1.2

minscale

最小放大倍数

Number0.8

maxscale

最大放大倍数

Number2

3、事件

名称说明回调参数
closepdf pdf关闭事件-
pdferr文件地址解析错误事件-

4、核心代码

<template><div class="case-info"><van-cell title="附件" value="预览" is-link @click="viewPdf" class="perview" /><vueshowpdf class="pdf" v-model="isShowPdf" :pdfurl="pdfurl":minscale='0.4' :scale='0.6' @closepdf="isShowPdf = false" @pdferr="pdfError"></vueshowpdf></div>
</template><script>
import api from '@/api.js'
import vueshowpdf from 'vueshowpdf'
export default {name: 'test',data () {return {isShowPdf: false,pdfUrl: '',pdfKey: 0}},components: {vueshowpdf},deactivated () {// 离开页面默认关闭pdfthis.isShowPdf = falsethis.pdfKey++},methods: {// 预览pdfasync viewPdf () {if (this.pdfUrl) {this.isShowPdf = true} else {this.$toast.loading({message: '加载中...',duration: 0,forbidClick: true})try {const res = await api.getFilePreview()this.$toast.clear()if (res.code === '0') {let blob = this.dataURLtoBlob(res.data)this.pdfurl = URL.createObjectURL(blob)this.isShowPdf = true} else {this.$toast(res.msg || '该原始文件不存在')}} catch (error) {this.$toast.clear()}}},// 将base64转换为文件dataURLtoBlob (dataurl) {const bstr = atob(dataurl)let n = bstr.lengthconst u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new Blob([u8arr], { type: 'application/pdf' })},// 关闭pdfclosePdf () {this.isShowPdf = falsethis.pdfKey++},// pdf预览失败pdfError (errorUrl) {this.$toast.fail('预览失败')this.isShowPdf = falsethis.pdfKey++}}
}
</script><style lang="scss" scoped>.perview .van-cell__value {color: #468bff;text-decoration: underline;}
</style>

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

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

相关文章

Feign远程接口调用

概述 目的&#xff1a;解决微服务调用问题。如何从微服务A调用微服务B提供的接口。 特性&#xff1a; 声明式语法&#xff0c;简化接口调用代码开发。像调用本地方法一样调用其他微服务中的接口。集成了Eureka服务发现&#xff0c;可以从注册中心中发现微服务。集成了Spring…

ZTMap是如何在相关政策引导下让建筑更加智慧化的?

近几年随着智慧楼宇概念的深入&#xff0c;尤其是在“十四五规划”“新基建”“数字经济”等相关战略和政策的引导下&#xff0c;智慧楼宇也迎来了快速发展期&#xff0c;对推动智慧城市系统的建设越来越重要。那么究竟什么是智慧楼宇呢&#xff1f;智慧楼宇其实就是整合楼宇内…

Linux:基础开发工具之Makefile和缓冲区的基本概念

文章目录 动静态库自动化构建代码缓冲区原理实现具体实现 动静态库 首先要知道什么是链接&#xff1a; C程序中&#xff0c;并没有定义printf的函数实现,且在预编译中包含的stdio.h中也只有该函数的声明,而没有定义函数的实现 系统把这些函数实现都被做到名为 libc.so.6 的库…

【计算机网络】传输层协议——TCP(下)

文章目录 1. 三次握手三次握手的本质是建立链接&#xff0c;什么是链接&#xff1f;整体过程三次握手过程中报文丢失问题为什么2次握手不可以&#xff1f;为什么要三次握手&#xff1f; 2. 四次挥手整体过程为什么要等待2MSL 3. 流量控制4. 滑动窗口共识滑动窗口的一般情况理解…

EasyX图形化界面

这里写目录标题 EasyX绘制简单的图形化窗口窗口坐标设置窗口属性实现基本绘图功能贴图原样贴图透明贴图认识素材 代码步骤 按键交互阻塞按键 鼠标交互 EasyX 绘制简单的图形化窗口 代码示例&#xff1a; while&#xff08;1&#xff09;&#xff1b; 可以防止闪屏 窗口坐标 …

matlab根轨迹绘制

绘制根轨迹目的就是改变系统的闭环极点&#xff0c;使得系统由不稳定变为稳定或者使得稳定的系统变得更加稳定。 在使用PID控制器的时候&#xff0c;首先要确定的参数是Kp&#xff0c;画成框图的形式如下&#xff1a; 也就是想要知道Kp对系统性能有哪些影响&#xff0c;此时就…

设计模式之代理模式的懂静态代理和动态代理

目录 1 概述1.1 如何实现&#xff1f;1.2 优点1.3 缺点1.4 适用场景 2 静态代理实现3 JDK 动态代理实现4 CGlib 动态代理实现5 总结 1 概述 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它的概念很简单&#xff0c;它通过创建一个代理对象来…

便捷又炸街!Mate 60的智感支付,是如何做到快速又安全的?

扫码支付已成为线下消费的主流付款方式&#xff0c;平时出门&#xff0c;手机一带&#xff0c;钱包拜拜&#xff01; 以微信支付为例&#xff0c;正常线下支付&#xff0c;手机解锁状态下&#xff1a; 第一步&#xff1a;找到微信APP&#xff1b; 第二步&#xff1a;打开右上…

合宙Air724UG LuatOS-Air LVGL API控件-窗口 (Window)

窗口 (Window) 分 享导出pdf 示例代码 win lvgl.win_create(lvgl.scr_act(), nil) lvgl.win_set_title(win, "Window title") -- close_btn lvgl.win_add_btn_right(win, "\xef\x80\x8d") -- --lvgl.obj_set_event_cb(cl…

Nacos注册中心

Nacos 安装 https://nacos.io/zh-cn/ 源码安装 第一步&#xff1a;利用Gitee获取nacos在github上的代码到自己的gitee仓库中 https://github.com/alibaba/nacos.git 第二步&#xff1a;下载源码到本地。 第三步&#xff1a;使用maven编译代码。 # 先切换到master分支 gi…

3 分钟,带你了解低代码开发

一、低代码平台存在的意义 传统软件开发交付链中&#xff0c;需求经过3次传递&#xff0c;用户→业务→架构师→开发&#xff0c;每一层传递都可能使需求失真&#xff0c;导致最终交付的功能返工。 业务的变化促使软件开发过程不断更新、迭代和演进&#xff0c;而低代码开发即是…

vi/vim编辑器

vi和vim区别 vi 和 vim 是常见的文本编辑器&#xff0c;以下是它们之间的区别&#xff1a; 功能和特性&#xff1a; vi 是最早的版本&#xff0c;是在早期Unix系统中广泛使用的编辑器。vi 相对较简单&#xff0c;功能主要集中在基本的文本编辑操作上&#xff0c;如插入、删除、…