文件预览的实现

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 小时前
高级前端 Input 公共组件设计方案(Vue3 + TypeScript)
前端·javascript·typescript·vue·组件设计方案
by__csdn6 小时前
微前端架构:从理论到实践的全面解析
前端·javascript·vue.js·架构·typescript·vue·ecmascript
Felix_Fly8 小时前
用 Vue3 + naive-cron 开发 Cron 表达式工具:从 0 到 1 实现生成 + 反解析
前端·javascript·vue.js·vue·cron·naive
@AfeiyuO15 小时前
Vue3 旭日图
vue·echarts
by__csdn16 小时前
JavaScript性能优化:减少重绘和回流(Reflow和Repaint)
开发语言·前端·javascript·vue.js·性能优化·typescript·vue
是梦终空1 天前
计算机毕业设计252—基于Java+Springboot+vue3+协同过滤推荐算法的农产品销售系统(源代码+数据库+2万字论文)
java·spring boot·vue·毕业设计·源代码·协同过滤算法·农产品销售系统
Beginner x_u1 天前
从组件点击事件到业务统一入口:一次前端操作链的完整解耦实践
前端·javascript·vue·业务封装
苏打水com2 天前
第十篇:Day28-30 工程化优化与部署——从“能跑”到“好用”(对标职场“项目上线”需求)
前端·css·vue·html·js
武哥聊编程2 天前
【从0带做】基于Springboot3+Vue3的生态养殖管理系统
java·学习·vue·毕业设计·springboot
xiaoxue..2 天前
从 “手动搬砖“ 到 “自动施法“:界面开发的三次 “渡劫“ 升级记
前端·前端框架·vue