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

  • 机票代理是否差额征税
  • 个体工商户所得税核定征收2023
  • 进项税额转出的情况
  • 比较优先股和普通股
  • 企业年报股东及出资信息要怎么填写
  • 软件公司主营业务类别
  • 新会计准则中资产减值论文
  • 发生费用是什么意思
  • 当月勾选认证的原材料与当月领用的原材料区别
  • 委托收款被拒绝后要怎么做
  • 收财务拨款的贷款合法吗
  • 公司工资发放错误怎么退回
  • 增资缴纳印花税的计算公式?
  • 待认证进项税额借贷方向
  • 案例分析改变,从三块板开始
  • 公司购买新办公楼装修计入什么科目
  • 零申报的企业
  • 外地出差的餐费住宿费是不是都计入差旅费
  • 支付的专家费怎么入账
  • 没有进出口权可以做外贸吗
  • 借 其他应付款
  • 潽金融资租赁有限公司
  • 个体户对私账户
  • mac如何连接电脑
  • Win10 Build 18363.1350/17763.1728累积更新补丁KB4598298正式推送
  • windows7给c盘扩容
  • php实现的三个常数是什么
  • Yii2使用驼峰命名的形式访问控制器的示例代码
  • Windows11如何使用管理员账号登录
  • 如何做批发
  • 营业外收支计算公式
  • 企业投资固定资产
  • 银行转账手续费最高多少钱
  • typescript some
  • 收取的水电费怎么入账
  • 企业在外地单位怎么交税
  • 不能加计扣除的研发费用在辅助账怎么反映
  • 爬虫工程师简介
  • javagui框架
  • 织梦自定义字段
  • 公司银行销户钱转到哪里去
  • 增值税发票认证期限最新规定
  • 企业所得税报表查询怎么查
  • 农机免税发票能抵扣吗
  • 公司间借款利息怎么开发票
  • 当月的进项税可以不认证吗?
  • 付国外客户佣金怎么代扣代缴增值税
  • 利润是用含税价还是去税价
  • 单位代扣代缴个人所得税凭证
  • 公账发工资如何记账
  • 银行扣掉的手续费怎么算
  • 员工借支备用金属于现金流量的哪类
  • 核定征收方式有哪些
  • 税务人员如何做好本职工作
  • 如何在sql server表中添加数据表格为什么没有显示
  • Win10预览版镜像
  • linux lv扩容
  • win10 怎么恢复
  • win7系统播放器在哪
  • linux diff用法
  • linux安装flash插件
  • win10系统如何更改盘符
  • virtualbox怎么打开虚拟机
  • 怎么在linux中安装软件
  • js代码执行顺序简单介绍
  • cocos2dx 3.0 beta android环境配置
  • cocos 2d x
  • 安卓录制音频
  • jquery.js插件
  • js模块化和组件化
  • unity3d asset store
  • 深入理解新发展理念
  • python3.5升级
  • js弹出div出现遮罩层
  • 一般纳税人开具的增值税普通发票和专用发票的区别
  • 水利基金税率‰6什么时候调整
  • 国家税务局总局黑龙江分局
  • 个人涉税信息采集 工行
  • 小规模纳税人销售自己使用过固定资产
  • 广东省地方税务局公告2017年第6号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设