文件预览的实现

1.pdf预览

使用iframe

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

html 复制代码
<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>
相关推荐
宠友信息2 天前
IM系统开发技术路线分析,即时通讯源码助力快速搭建聊天应用
java·spring boot·redis·websocket·mysql·uni-app·vue
南城以南溫暖如初1473 天前
从传统健身房到无人值守:24小时自助健身系统的技术实现路径
java·spring boot·mysql·架构·vue
新中地GIS开发老师3 天前
WebGIS开发学生作品 | 基于无人机影像的烟草检测智能体与数字化管理平台
vue·web·mapbox·webgis
南城以南溫暖如初1473 天前
外卖CPS实战指南:从技术选型到运营落地全流程解析
java·spring boot·mysql·架构·vue
aXin_ya4 天前
ElementUI (01):Vue2 项目引入 ElementUI使用
elementui·vue
常宇佳5 天前
vue3 @代指src路径设置
前端·typescript·vue
北城笑笑5 天前
Server 18 ,Nginx + Vite 前端部署排错实战:从 `/api/gpt/chat` 404 到 9012 后端服务的完整定位过程
linux·运维·前端·nginx·ubuntu·vue
breeze jiang7 天前
NestJS MVC 实战:用 hello 项目 7 个文件讲清分层、装饰器、依赖注入与错误处理
node.js·mvc·js
weixin_431600449 天前
前端数据埋点(1):一次点击如何变成一条埋点
前端·js·数据埋点
小强库计算机毕业设计9 天前
SpringBoot+Vue3 学生宿舍管理系统实战
java·spring boot·后端·vue·学生宿舍管理系统