技术栈

文件预览的实现

wifi___2024-05-24 8:57

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>
上一篇:MVSnet 代码详解(pytorch)
下一篇:夏天晚上热,早上凉怎么办?
相关推荐
吴声子夜歌
5 小时前
Vue3——表单元素绑定
前端·vue·es6
拆房老料
8 小时前
5分钟上手 OnlyOffice 连接器,打通业务系统与文档编辑器
编辑器·开源软件·js
DazedMen
1 天前
前端自定义接口返回,想咋玩就咋玩
前端·vue·接口拦截
劉三岁
2 天前
平板网页开发,px vs rem + 适配方案
vue·电脑
蓝黑2020
2 天前
Vue组件通信之emit
前端·javascript·vue
吴声子夜歌
2 天前
Vue3——v-for指令
前端·javascript·vue
滴滴答答哒
3 天前
Vue3 动态路由组件加载:后台字符串到前端懒加载组件的完美转换
vue
阿飞不想努力
3 天前
文件上传原理与实操
java·spring boot·vue·文件上传
曲幽
4 天前
FastAPI+Vue:文件分片上传+秒传+断点续传,这坑我帮你踩平了!
python·vue·upload·fastapi·web·blob·chunk·spark-md5
蓝黑2020
5 天前
Vue组件通信之v-model
前端·javascript·vue
热门推荐
012026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026 年 AI 编程助手全面对比评测:Cursor vs Copilot vs Claude Code vs GitHub Copilot Free04一周AI热点速览(2026.03.31-04.06):GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛05GPT-6发布日深度解析-Symphony架构200万Token实战06基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南07AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析08零成本!Ollama本地部署国产大模型全指南(支持Kimi-K2.5/GLM-5/Qwen,新手秒上手)09GPT-6核心能力解析及与现有主流大模型对比10从限购到畅通:GLM-5.1 Coding Plan接入攻略