文件预览的实现

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>
相关推荐
RuoyiOffice10 小时前
SpringBoot+Vue3 企业云盘系统设计:文件上传+共享权限+收藏分类+5GB空间控制——从“网盘孤岛”到“企业知识底座”
spring boot·uni-app·vue·文件管理·云盘·网盘·ruoyioffice
T畅N1 天前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
吴声子夜歌1 天前
Vue3——使用Mock.js
javascript·vue·mock.js
abcnull1 天前
Springboot+Vue2的Web项目小白入门Demo快速学习!
java·elementui·vue·maven·springboot·web·小白
RuoyiOffice1 天前
SpringBoot+Vue3 企业假期余额系统设计:账户、流水、预占、销假退回与到期清零全链路拆解
spring boot·后端·spring·vue·hr·企业管理软件·ruoyioffice
abcnull2 天前
传统的JavaWeb项目Demo快速学习!
java·servlet·elementui·vue·javaweb
RuoyiOffice2 天前
SpringBoot+Vue3 实现 OA 公文外来文与归档台账:外部收文、BPM办理、三类公文统一归档
spring boot·微服务·uni-app·vue·ruoyi·anti-design-vue·ruoyioffice
树欲静·而风不止3 天前
拿 DeepSeek 的免费对话搓了个 Everything 的静态 WebUI
ai·js
RuoyiOffice3 天前
SpringBoot+Vue3 企业考勤如何处理法定假期?节假日方案、调休补班与工作日判断链路拆解
spring boot·后端·vue·anti-design-vue·ruoyioffice·假期·人力
REDcker4 天前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js