文件预览的实现

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>
相关推荐
Watermelo61715 小时前
为什么赋值过程会丢失this
开发语言·前端·javascript·vue.js·前端框架·es6·js
harrain3 天前
vue2开发环境搭建指南
vue
by__csdn3 天前
Electron+Vite:实现electron + vue3 + ts + pinia + vite高效跨平台开发指南
前端·javascript·vue.js·typescript·electron·node.js·vue
bank_dreamer4 天前
VSCODE前端代码风格格式化
前端·css·vscode·html·js·prettier·代码格式化
人工智能训练4 天前
前端框架选型破局指南:Vue、React、Next.js 从差异到落地全解析
运维·javascript·人工智能·前端框架·vue·react·next.js
李纲明5 天前
WordPress外贸成品网站的免费获取渠道
vue·php
加洛斯5 天前
前端小知识002:ref 与 reactive 详解
前端·vue
荣轩浩6 天前
Molstar 鼠标与键盘事件监听
前端·javascript·js·molstar
荣轩浩6 天前
Molstar 更改 Focus representation 的 扩展半径
前端·javascript·js·molstar
计算机毕设vx_bysj68696 天前
计算机毕业设计必看必学~Springboot教学进度管理系统,原创定制程序、单片机、java、PHP、Python、小程序、文案全套、毕设成品等!
java·spring boot·vue·课程设计·管理系统