位置: 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是什么进程 有什么用

  • 盘亏存货进项税额转出的计算公式
  • 公司代扣代缴个人所得税如何退税
  • 进项税转出从待认证到月末结转的会计分录是
  • 私车公用去税务局开什么发票
  • 汇算清缴职工教育费填在
  • 成本税率计算公式
  • 税局用户名
  • 购买原材料记账凭证怎么写
  • 房产交房前开发商要办齐的手续
  • 质保金扣款要进项税转出吗
  • 虚开发票应如何进行处罚
  • 政府搬迁补偿款记资本公积
  • 领用外购材料用于动产
  • 出售车辆需要缴纳哪些税
  • 电商公司怎么进入
  • 制造业贷款用途
  • 广告费定金属于什么科目
  • 员工与单位解除劳动合同书范本
  • 一般纳税人的兼职合法吗
  • 增值税纳税义务人
  • 销售类小规模没有成本票怎么办
  • 开具红字发票退税准备什么资料?
  • 雇主责任险发票可以用复印件吗
  • 进口货物的企业有哪些
  • 资本性支出计算公式为什么加折旧
  • linux |bc
  • PHP:xml_set_processing_instruction_handler()的用法_XML解析器函数
  • php5.4+mysql
  • 代扣代缴个税手续费返还政策
  • 非营利性组织收到政府拨款转出给其他部门怎么做账
  • 在建工程计提减值准备计入什么科目
  • 借款业务包括以下哪些形式
  • 解读一篇文章
  • 阿尔卑斯旱獭冬眠
  • php使用教程
  • 存货跌价准备的分录
  • 员工报销的差旅费属于什么科目
  • 一文速学-XGBoost模型算法原理以及实现+Python项目实战
  • 专票电话号码不对有影响吗
  • python怎么生成随机矩阵
  • 抄税前要做什么
  • 金税盘怎么取消
  • 小规模发票跨月冲红怎么做账
  • 专用发票跨月冲红流程
  • 固定资金作为固定资产的货币表现的特点
  • 税盘开票机号怎么看
  • mysql的lsn
  • 公司支付宝账户怎么管理
  • 关于小规模纳税人的说法正确的是
  • 客户购买商品的三要素
  • 单位社保缴费收费标准
  • 印花税算错了地方怎么办
  • 什么是一般生产要素
  • ubuntu git not found
  • mac截图快捷键设置
  • centos安装yun
  • windows锁屏界面设置
  • 优化linux系统的方法
  • win7升级到win10专业版教程
  • node modules干嘛的
  • cocos2dx 教程
  • 关于我和鬼变成家人的那件事
  • jquery表单验证代码
  • python三角形角度
  • unity团队
  • easyui datagrid loader
  • node javascript
  • 网页设计中的几种齐方式及其特点
  • pycharm新手使用教程
  • 关于echo的名字
  • js基础知识
  • jquery中的动画方法有哪些
  • 曲靖市税务局领导班子
  • 浙江省国税公务员工资
  • 弥补亏损怎么算
  • 乡镇调研报告最佳范文
  • 现任新疆兵团政治部主任
  • 江西税务登记证查询官网
  • 河北省社保证明网上查询
  • 2021北京餐饮业发展趋势报告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设