文件预览的实现

news2024/12/22 20:38:56

1.pdf预览

使用iframe

如果是预览本地文件,且是vue项目,pdf文件需要放在public文件夹下。
调试环境:vue、vant、js

<template>
  <div style="height: 100%;width: 100%">
    <iframe :src="pageUrl" style="width: 100%;height: 100%"></iframe>
  </div>
</template>
<script setup>
import {ref} from "vue";
const pageUrl = ref('/xxx.pdf');
</script>
<style lang="scss" scoped>
</style>

在这里插入图片描述

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

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

相关文章

Docker容器测试-常见问题+解决

前言 问题1&#xff1a;创建 nginx 容器尝试挂载 nginx.conf 文件时报错&#xff1a; mounting “/root/nginx.conf” to rootfs at “/etc/nginx/nginx.conf” caused: mount through procfd: not a directory: 在自己的服务器上想通过 nginx 镜像创建容器&#xff0c;并挂载…

ROS | C++和python实现发布结点和订阅结点

发布者结点&#xff1a; 代码实现&#xff1a; python: C: C和Python发布结点的差异&#xff1a; python: 发布结点pub 大管家rospy调用publisher函数发布话题 (话题,类型&#xff0c;话题长度&#xff09; C: 先定义一个大管家&#xff1a;NodeHandle 然后大管家发布话题…

【leetcode——栈的题目】——1003. 检查替换后的词是否有效python

题目&#xff1a; 给你一个字符串 s &#xff0c;请你判断它是否 有效 。 字符串 s 有效 需要满足&#xff1a;假设开始有一个空字符串 t "" &#xff0c;你可以执行 任意次 下述操作将 t 转换为 s &#xff1a; 将字符串 "abc" 插入到 t 中的任意位置…

Dinky MySQLCDC 整库同步到 MySQL jar包冲突问题解决

资源&#xff1a;flink 1.17.0、dinky 1.0.2 问题&#xff1a;对于kafka相关的包内类找不到的情况 解决&#xff1a;使用 flink-sql-connector- 胖包即可&#xff0c;去掉 flink-connector- 相关瘦包&#xff0c;解决胖瘦包冲突 source使用 flink-sql-connector- 胖包&#…

2024年西安交通大学程序设计校赛

A题 签到题 代码如下 //A #include<iostream> #include<algorithm> #define int long long #define endl \n #define IOS ios::sync_with_stdio(0),cin.tie(0),cout.tie(0); using namespace std; signed main() {IOSint a,b,c,d;cin>>a>>b>>c…

景源畅信:抖音小店如何开橱窗?

在当今数字化时代&#xff0c;社交媒体平台不仅仅是人们交流和分享生活的工具&#xff0c;更成为了商家们展示和销售产品的重要场所。抖音作为一款流行的短视频社交应用&#xff0c;其内置的电商功能——抖音小店&#xff0c;为众多商家和个人提供了便捷的在线销售途径。其中&a…

geotrust通配符证书600元且赠送一个月

GeoTrust作为国际知名的数字证书颁发机构&#xff0c;旗下有RapidSSL、QuickSSL等子品牌经营着各种类型的SSL数字证书&#xff0c;其中RapidSSL旗下的SSL数字证书都是入门级的&#xff0c;性价比高。审核速度也比较快&#xff0c;证书的适用范围也比较广泛。今天就随SSL盾小编了…

一款开箱即用的Markdown 编辑器!【送源码】

开源的 Markdown 编辑器 Cherry Markdown Editor 是一款前端-markdown-编辑器-组件&#xff0c;具有开箱即用、轻量简洁、易于扩展等特点&#xff0c;它可以运行在浏览器或服务端 (NodeJs). 当 Cherry Markdown 编辑器支持的语法不满足开发者需求时&#xff0c;可以快速的进行…

在WHM中如何调整max_upload_size 参数大小

今日我们在搭建新网站时需要调整一下PHP参数max_upload_size 的大小&#xff0c;我们公司使用的Hostease的美国独立服务器产品默认5个IP地址&#xff0c;也购买了cPanel面板&#xff0c;因此联系Hostease的技术支持&#xff0c;寻求帮助了解到如何在WHM中调整PHP参数&#xff0…

蓝桥杯物联网竞赛_STM32L071KBU6_对于EEPROM的新理解

EEPROM写函数&#xff1a; void Function_GetEepromData(){Function_EepromRead(4, BUFF);OLED_ShowChar(0, 0, BUFF[0] 0);OLED_ShowChar(0, 2, BUFF[1] 0); BUFF[0] ;BUFF[1] ;HAL_FLASHEx_DATAEEPROM_Unlock();HAL_FLASHEx_DATAEEPROM_Program(FLASH_TYPEPROGRAMDATA_WOR…

《STM32Cube高效开发教程基础篇》- 安装软件/Demo3_1LED

文章目录 下载两个软件安装问题记录在STM32CubeMX中新建项目编辑代码在CudeMX中完成图形化设置在CudeIdea中编码在CLion中编码&#xff08;智能化&#xff09; 效果图 下载两个软件 百度网盘链接&#xff1a;https://pan.baidu.com/s/1uXLWIIVCJbF4ZdvZ7k11Pw 提取码&#xff1…

kubernetes-PV与PVC

一、PV和PVC详解 当前&#xff0c;存储的方式和种类有很多&#xff0c;并且各种存储的参数也需要非常专业的技术人员才能够了解。在Kubernetes集群中&#xff0c;放了方便我们的使用和管理&#xff0c;Kubernetes提出了PV和PVC的概念&#xff0c;这样Kubernetes集群的管理人员就…

华发股份:加强业务协同 新政下项目热销

“5.17”楼市政策出台后&#xff0c;各地密集落地执行。5月27—28日&#xff0c;上海、广州、深圳三个一线城市跟进落地“517”新政。上海发布《关于优化本市房地产市场平稳健康发展政策措施的通知》&#xff0c;共计9条调整政策&#xff0c;涵盖外地户籍、人才、单身、婚否、企…

如何恢复被盗的加密货币?

本世纪&#xff0c;网络犯罪的首要目标是加密货币。 这要归功于加密货币的日益普及和价值&#xff0c;网络犯罪分子已经认识到经济收益的潜力&#xff0c;并将重点转向利用这种数字资产中的漏洞。 在今天的文章中&#xff0c;我们将讨论加密货币恢复和被盗加密货币恢复。 我们…

爱设计AiPPT.cn赵充:营销工作的AI进化

爱设计&AiPPT.cn是一家 AIGC 数字科技企业&#xff0c;致力于打造「下一代个人与组织的 Ai 工作站」 。目前旗下产品包括AiPPT.cn、爱设计AIGC 内容中台、365 编辑器、爱设计在线设计工具、AiH5 等超过 10 余款应用 AI 能力的内容创作工具。日前&#xff0c;爱设计&AiP…

SpringMVC 数据映射VC

从 view 层发送请求到Controller&#xff0c;在Controller中获取参数&#xff1a; 在不输入值时会报400&#xff0c;参数错误 在不输入值时num默认为null 没有找到对应标签名称叫nums的&#xff0c;输入任何值时都报400 设置required默认值为false&#xff0c;即使表单没有nums…

轧钢测径仪分析软件,四大图表带来产线新视角!

轧钢测径仪是智能化检测设备&#xff0c;除了测径仪主体外&#xff0c;还配有测控软件系统&#xff0c;从这里可对测径仪进行各种设置&#xff0c;亦可从此观测到测径仪获得的各种信息&#xff0c;如检测信息、分析图表、计算尺寸、历史数据等。而从测径仪获得的图表信息主要有…

java后端框架-MyBatis

一、概述 1、起源 MyBatis本是Apache下的开源项目&#xff0c;名为iBatis,2010年转投谷歌,从iBatis3.x开始更名为MyBatis 2、优点 (1)优秀的数据持久层框架&#xff08;对jdbc做了轻量级封装&#xff09; 3、特点 (1)对jdbc中接口进行封装的同时还提供了一些自己的类实现…

持续领跑教育科技,网易有道再发“子曰”教育大模型全新应用

5月29日&#xff0c;网易有道“子曰”教育大模型媒体交流会在北京举行。会上&#xff0c;网易有道分享了子曰教育大模型最新技术进展及三大AI创新应用&#xff1a;AI全科学习助手“有道小P”APP、新一代虚拟人口语教练Hi Echo 3.0和新一代知识库问答引擎QAnything。 现场&…

conda修改环境名称后,无法安装包,显示no such file

1问题描述 原本创建环境时设置的名字不太合适&#xff0c;但是因为重新创建环境很麻烦&#xff0c;安装很多包。。所以想直接对包名进行修改&#xff0c;本人采用的方式是直接找到conda环境的文件目录&#xff0c;然后修改文件名&#xff0c;简单粗暴。确实修改成功了&#xf…