文件预览的实现

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 小时前
【前端】Webpack相关(长期更新)
前端·javascript·webpack·前端框架·node.js·vue·scss
贪婪的君子17 小时前
【每日一面】实现一个深拷贝函数
前端·js
老华带你飞1 天前
房屋租赁|房屋出租|房屋租赁系统|基于Springboot的房屋租赁系统设计与实现(源码+数据库+文档)
java·数据库·spring boot·vue·论文·毕设·房屋租赁系统
前端摸鱼匠1 天前
Vue 3 事件修饰符全解析:从 .stop 到 .passive,彻底掌握前端交互的艺术
前端·vue.js·node.js·vue·交互
Crazy Struggle1 天前
.NET 8.0 + Vue 企业级在线培训系统(开源、免费、支持多种主流数据库)
vue·.net 8.0·后台管理系统
韩立学长2 天前
【开题答辩实录分享】以《植物病虫害在线答疑小程序的设计与实现》为例进行答辩实录分享
spring boot·小程序·vue
whltaoin3 天前
【JAVA全栈项目】弧图图-智能图床 SpringBoot+Vue3 :[框架开荒:一文全步骤打通前后端项目全流程]
java·spring boot·vue·开源项目·全栈·cos
清灵xmf4 天前
Vue + TSX 中使用 class 报错 解决方法
vue
专注前端30年5 天前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue
~无忧花开~5 天前
掌握Axios:前端HTTP请求全攻略
开发语言·前端·学习·js