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

vue3 H5项目中实现PDF预览

 是需要npm i vue-pdf-embed 安装这个插件的,可兼容ios/Android,下面是本人的使用实例

<template><div class="conten_box"><vue-pdf-embed v-if="pdfSource.url" :source="pdfSource" /></div>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { ylhtPdf } from "@/api/ht/index";
import VuePdfEmbed from "vue-pdf-embed";const pdfSource = reactive({url: "",cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/",cMapPacked: true,
});// 获取pdf需要的url
const getInvitation = () => {ylhtPdf().then(({ data: { code, data, message } }) => {pdfSource.url = data.contract;}).catch(() => {});
}onMounted(() => {getInvitation()
})</script>

http://www.lryc.cn/news/265476.html

相关文章:

  • 【WebRTC---源码篇】(十一:一)采集编码发送期间使用时间戳的详细解读
  • Python学习路线 - Python语言基础入门 - Python异常、模块与包
  • eventbus,在this.$on监听事件时无法在获取数据
  • 【Python必做100题】之第二十五题(统计字符)
  • 开发语言:ArkTS
  • Qt中字符串转换为JS的函数执行
  • TCP/IP:从数据包到网络的演变
  • 闪存驱动器与机械硬盘与固态硬盘
  • java String转asc码,然后ascII再转四位的16进制数。
  • 零基础制作宠物用品小程序
  • 【SpringBoot篇】解决缓存击穿问题① — 基于互斥锁方式
  • 系列一、GitHub搜索技巧
  • 35.java后端面试宝典
  • Linux 磁盘空间占满故障解决方法
  • 让生活更智能,P1600边缘智能网关带你进入智能家居新时代
  • Java与前端:2023年的真实状况与焦虑解读
  • adb 基本命令合集
  • [RK-Linux] RK3399支持M.2 NVMe SSD启动
  • LTO-3 磁带机种草终于是用上了
  • 【全网首发】洛谷P1020 [NOIP1999 提高组] 导弹拦截
  • trino-435版本windows下源码编译
  • java类和对象的思想概述
  • ant design vue3中引入message消息提示,全局引入亲测有效
  • UE5 Landscape 制作GIS卫星图地形
  • opencv入门到精通——改变颜色空间
  • 法线贴图实现地形模型皱褶、凹凸不平的纹理效果
  • 【SpringBoot篇】基于Redis实现生成全局唯一ID的方法
  • 轻度听力损失的儿童需要早期干预吗?
  • 【Spring Security】认证密码加密Token令牌CSRF的使用详解
  • python一点通: 一文讲清Post 和 Put操作区别!