位置: IT常识 - 正文

Vue中引入HTML静态资源文件(包含数据的传递)(html大屏)(vue-html)

编辑:rootadmin
Vue中引入HTML静态资源文件(包含数据的传递)(html大屏) 需求

推荐整理分享Vue中引入HTML静态资源文件(包含数据的传递)(html大屏)(vue-html),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue引入html静态文件,vue-html,vue引用html文件,html引入vue.js,vue引入静态js,vue引入静态js,vue引入html静态文件,vue 引入html,内容如对您有帮助,希望把文章链接给更多的朋友!

项目需要做一个可视化大屏,要的时间比较急,在查找大屏模板的时候找到了合适的一个静态的HTML+JS+CSS的一个模板,但是这个模板没有数据请求等工具方法,于是现在想要把这个html文件放在vue项目中,并且通过vue获取数据,把数据传到html页面,在页面内展示数据。

实现

首先,在项目的public文件夹下创建新文件夹(我创建的名字是bigdata),然后将你的html+js+css静态资源文件放在该文件夹下。 

在vue的项目中新建一个vue页面(别忘了创建对应的路由),该页面通过<iframe>标签将你的html页面放在里面,如下:

<template> <div class="iframe_box"> <div class="load" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中" ></div> <iframe :src="`${publicPath}bigdata/index1.html`" width="100%" height="100%" ref="iframeDom" ></iframe> </div></template>

在这个vue页面中你需要向后台请求数据,然后将数据传给   iframe 的那个静态页面。

难点

如何传递数据?

html页面加一个监听message的事件

<script type="text/javascript">dataT = {};console.log("开始接收函数");window.addEventListener('message', (data) => {dataT = data.data.total;console.log("拿到数据", dataT);});</script>Vue中引入HTML静态资源文件(包含数据的传递)(html大屏)(vue-html)

我的vue页面拿到数据之后,通过触发postMessage方法传送数据

ps:

contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。

可以通过所有标准的 DOM 方法来处理被返回的对象。

promise 的 all 方法 详解

Promise.all() - JavaScript | MDNPromise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且只返回一个Promise实例, 那个输入的所有 promise 的 resolve 回调的结果是一个数组。这个Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束,或者输入的 iterable 里没有 promise 了的时候。它的 reject 回调执行是,只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误,并且 reject 的是第一个抛出的错误信息。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

mounted() { //拿到 这个html文件的dom let iframeWin = this.$refs.iframeDom.contentWindow; //获取数据 (我要请求的是很多数据,所以用了promise的all方法包装了一下) //没有这个需求的话 正常接收数据就行了。 Promise.all([ this.getHeadLeft(), this.getHeadRight(), this.getMIdLeft(), this.getMIdMid(), this.getBottomRight(), this.getBottomMid(), this.getBottomLeft(), ]) .then(() => { this.loading = false; console.log("开始发送数据"); iframeWin.postMessage( { total: this.total, }, "*" ); }) .catch((e) => { console.log(e); }); },

至此,传送数据成功。

成果

控制台:

页面:(数据都是后端拿过来的)

 如果有问题或是可以指导的可以留言讨论

本文链接地址:https://www.jiuchutong.com/zhishi/283582.html 转载请保留说明!

上一篇:【今日端午节】 (© Xinhua/Alamy Stock Photo)(今天端午节?)

下一篇:pascl32.exe - pascl32是什么进程 有什么用

  • 所得税报表的营业成本包括管理费用吗
  • 开办期间的利息收入怎么做账
  • 财务软件怎么结转本年利润
  • 报个税的工资表
  • 企业购进软件系统后如何做账
  • 材料成本差异借贷方向
  • 总分机构汇算清缴成功后还需要填表什么报表
  • 全国统一吗?
  • 如何理解递延所得税资产和负债计算
  • 外管证报验核销
  • 应收而未收的装修款如何做账务处理?
  • 通行费机打发票查询
  • 携税宝服务费可以入办公费吗
  • 取得稳岗补贴后怎么办
  • 哪些项目可以免征个人所得税
  • 享受企业所得税税额抵免优惠的设备包括
  • 技术服务费怎么开票
  • 定额手撕发票怎么买
  • 汽车罚款怎么进账
  • 工伤赔付是那个出钱呢
  • 税基式减免的内容有哪些?
  • 当月增加的固定资产
  • 废旧物资收购发票
  • 如何结束excel
  • 会计主要做些啥
  • 合伙企业是怎样分红的
  • 技术合同指什么
  • 利用网速测试器测试
  • windows11正式版本
  • 什么时编制
  • 贷款损失会计处理
  • 损益类科目包括费用类科目吗
  • 进程process.acore已停止怎么办
  • 微信公众平台开发
  • php入门例子
  • 购买轿车增值税可抵扣吗?
  • 盘亏应交税费
  • 固定资产后续支出一律计入固定资产成本
  • 前端跨域的方法
  • 企业其他应付款太多怎么办
  • vue导航解析流程
  • 年报数据和四季度数据一样吗
  • 帝国cms如何搭建的
  • 漏税处罚
  • 图文详解汽车坐垫安装方法
  • mysql四种常见日志
  • pythonzen
  • 出口退税转内销的损失
  • 制造车间买来刀具怎么办
  • 汇票贴现是什么
  • 个人名字的发票可以报销吗
  • mysql基础操作命令
  • 一次还本付息债券定价公式
  • 补发以前年度工资怎么做账
  • 坏账准备怎么做底稿
  • 企业间借款利息开票税收分类编码
  • 企业的专利收费是多少
  • 发票作废怎么写说明
  • mysql怎么清理干净
  • 如何开启windows防火墙
  • win7虚拟内存怎么设置
  • centos 安装chia
  • win7无法删除d盘
  • win10 预览版 移除 tab 栏 特性
  • ubuntu 软件删除
  • 教你怎样用竹子搭棚子
  • js的事件绑定
  • 样式的使用方法
  • java scripts
  • 网页上面的收藏夹显示
  • bat延迟1秒
  • vue项目简介
  • jquery给table赋值
  • node.js的理解
  • asynctask缺点
  • 企业所得税年报资产总额平均值怎么填写
  • 如何查询车辆购买的保险是哪家保险公司
  • 河南政务服务网官网
  • 铅球七米
  • 贵阳市税务电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设