vue项目使用iframe加载本地的html文件

最新推荐文章于 2024-05-22 18:00:57 发布
最新推荐文章于 2024-05-22 18:00:57 发布
阅读量1.8w 收藏 16
点赞数 5
分类专栏： vue 文章标签： iframe vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43589225/article/details/93884488
版权

说一说，vue项目使用iframe加载本地html文件走过的坑，是真的坑

来开始我的坑路之旅：

坑一：.建立一个和src平级的文件夹public，在public文件夹下面放你所需要的html，css,js等资源，
然后通过iframe加载所遇到的html

在这里插入图片描述
来让我们看效果： 页面是请求成功了，但是却没有显示
在这里插入图片描述
在这里插入图片描述

坑二：.有人把html页面放在static文件夹下面，说打包后，页面找不到，所以被建议放在src文件夹里面，然后你会发现效果和坑一一样，同样加载不到你的页面

所以正确的做法是什么呢？？？
对， 没错 还是放在我们的static文件夹下面
在这里插入图片描述

展现我们的效果
在这里插入图片描述

小小的星芒
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
在vue中实现嵌套页面(iframe)
10-15
在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档，这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...
vue3嵌套iframe及相互通迅
05-22
实现通过vue路由 加载第三方服务页面，实时同步vue路由及iframe页面地址，可用于JSF等项目重构，也可用于直接访问静态页面。具体实现文档地址为：...
vue-cli3 使用 iframe嵌入本地html 文件
程序猿小白的博客
05-10 2159
* 注意：在vue-cli3 中，需要将引入的html文件放在 public/static 目录下，否则不生效。 vue-cli2 中，放在 static 目录下可以正常引入 // src 的根路径就是public <iframe src="static/test.html"></iframe> ...
Vue3项目中引入html页面
weixin_42560947的博客
11-24 1万+
Vue3项目中引入html页面
uniapp_内嵌H5
最新发布
分享程序相关知识
05-22 496
使用uniapp开发微信小程序，实现内嵌H5的功能。
Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
朝花夕拾的博客
08-10 3951
html页面同样也要根据传递过来不同的参数 去调整自己的逻辑，首先知道html是如何接收到vue传来的消息的，window监听message即可接收postMessage发送来的消息。通过window.parent['vue里面绑定的名称']（需要传递的参数） 可以定义一个对象来传参 这种方法就可以调用到vue里面的方法啦！html页面接收时是通过message统一接收的，针对发送多个消息的情况下， 我们这里做下区分，将html页面通过iframe的方式嵌入进来之后，发现页面是空白的，不显示任何元素，
vue打印iframe嵌套的html页面，解决vue初始化触发函数但是传值失败的问题
热门推荐
波塞冬的博客
06-15 32万+
vue打印iframe嵌套的html页面，解决vue初始化触发不了函数传值的问题 文章目录vue打印iframe嵌套的html页面，解决vue初始化触发不了函数传值的问题前言一、iframe使用注意事项？二、使用步骤1.Vue 组件如何引入 iframe2.Vue 如何获取 iframe 对象以及 iframe 内的 window 对象并传值到html文件3.子页面 iframe 内部如何接收信息并发送信息4.Vue 组件如何打印iframe下的html总结 前言 这里主要是为了记录改变this指向解决
Vue中使用iframe加载HTML文件
m0_57996540的博客
05-11 4628
Vue中使用iframe 嵌入HTML 页面
Vue动态加载异步组件的方法
10-17
Vue动态加载异步组件是一种优化应用性能和加载速度的技术，特别是在大型项目中，不是所有组件都需要一开始就加载到浏览器中。这种技术允许我们在运行时按需加载组件，减少初始加载时间，提升用户体验。以下是对Vue...
iframe标签实现pdf预览功能
05-29
在本篇文章中，我们将深入探讨如何使用`iframe`标签结合Vue和React框架来实现在网页中预览PDF文件。 首先，`iframe`标签的基本用法如下： ```html <iframe src="path_to_your_pdf.pdf" width="100%" height="500">...
spring+element+vue附件上传、下载及在线预览
01-14
首先，我们需要在Spring Boot项目中配置文件存储。常见的存储方式有本地文件系统、云存储服务（如阿里云OSS或Amazon S3）等。在Spring Boot中，我们可以使用`@Controller`和`@PostMapping`注解创建一个接口来接收...
vue组件使用iframe加载本地html页面
weixin_43575792的博客
09-28 4428
需求 最近遇到一个需求，一个现成的页面使用jquery实现的，现在要嵌入到vue里，笔者表示要偷个懒，不想再画时间改成vue形式的,就采用iframe将改html直接渲染到界面上 操作 1.准备好自己的html页面，比如笔者的html文件夹叫做card,入口是index.html,放在根目录的public目录下 2.在你的vue组件页面放入iframe，注意这里路径很重要，因为不仅要在运行的时候正常显示，打包后也需要正常显示 ，所以要使用的路径相当于跟vue项目public目录下的入口文件index.h
Vue3 iframe引用本地文件以及根据内容调整iframe高度
qq_37656005的博客
03-14 4741
Vue3 iframe引用本地文件以及根据内容调整iframe高度 首先在public文件夹下新建文件夹static,将需要引入的html页面放入进去 template写引入iframe <iframe src="static/word/index.html" id="testFrame" name="myiframe" frameborder="0" width="100%" scrolling="no" style="min-height: 500px;" ></iframe
vue 加载html静态页面_vue-cli3将单页应用转化为多页面应用优化首屏加载速度
weixin_39710003的博客
12-13 651
首先初始化一个vue-cli3的项目：vue create vue-test目录是这样的：1、在src文件夹下创建home和about文件夹，并且在文件夹中添加App.vue、index.js、router.jshome/App.vuehome/index.jshome/router.js2、在about文件夹中创建components文件夹并在里面创建main1.vue、page1.vue、pa...
在vue项目中如何使用html页面
weixin_44221944的博客
04-28 2万+
如果有需求在vue页面要跳转新链接页页面可以使用原生html页面，下面将讲述从跳转到使用的过程 1、跳转到html页面 <el-button style="background:#04FFFD;border:none;position:absolute;top:2px;right:100px;z-index:2001;font-weight:bold" round> <a target="_blank" :href="hreft">视频监控大屏</a> &lt
iframe 内联加载
qq_36521848的博客
12-16 743
iframe 内联加载 ，通过iframe特性，加载网页到当前网页中。
uniapp内嵌入外部页面
weixin_44794123的博客
04-21 8952
uniapp内嵌入外部页面 嵌入外部页面 找到了两种解决方法： 1，iframe <iframe src="https://blog.csdn.net/weixin_44794123?spm=1001.2101.3001.5343" :style="{ height: this.app_height * 0.5 + 'rpx',width: this.app_height * 100 + 'rpx' }" > </iframe> 使用iframe，会出现布局错乱，然后需要手动去适
vue 通过iframe引入html资源，并传递参数
weixin_41765715的博客
09-27 2097
vue通过iframe嵌入本地集成的html资源
vue使用iframe预览本地文件
09-07
在Vue中，可以使用iframe来预览本地文件。首先，你需要在Vue模板中嵌套一个div元素，并设置一个class为"container"的样式，该样式需要设置position为relative，以及设置高度为100%。然后，在div元素中使用iframe标签，通过动态绑定src属性来加载本地文件。具体的代码示例如下： ```html <div class="container"> <iframe :src="'/pdf/web/viewer.html?file=' + srcPdf" class="pdf_iframe"></iframe> </div> ``` 其中，srcPdf是一个变量，用于存储要预览的本地文件路径。你可以根据需要自行设置该变量的值。请注意，如果你是在浏览器上运行项目，可以直接使用iframe标签来加载本地文件。然而，如果你需要在特殊的环境中运行，比如浙政钉，你可能需要使用vue-pdf和pdfh5插件来实现预览功能。在这种情况下，你可以将上述代码封装为一个预览pdf的组件。同时，你还需要在样式中设置pdf_iframe的宽度和高度，可以根据需要进行调整。例如，设置高度为900px。具体的样式代码如下： ```css .container { height: 100%; position: relative; } .pdf_iframe { width: 100%; height: 900px; } ``` 这样，你就可以在Vue中使用iframe来预览本地文件了。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值