vue+jsonp编写可导出html的模版,可通过外部改json动态更新页面内容

效果

导出后文件结果如图所示,点击Index.html即可查看页面,页面所有数据由report.json控制,修改report.json内容即可改变index.html展示内容

具体实现

1. 编写数据存储的json文件

index.html所在的public页面新建report.json文件,用loadReportJson()包裹json内容

javascript 复制代码
// report.json
loadReportJson({
	"test":111
})

2. 在需要导出的页面中编写json加载

在需要导出的页面中使用jsonp,加载report.json的数据

javascript 复制代码
// index.vue
// 主体页面加载json方式如下
mounted() {
  const url = './report.json';
  jsonp(url, 'loadReportJson').then((data) => {
    this.reportInfo = data;
  });
},

与后端配合

注:此方式的导出适用于报告模版等模版场景,不适用于自定义页面排版等场景

  • 在vue项目中导出dist文件给后端
  • 在需要导出的地方点击下载,由后端计算数据后填入report.json文件后下载文件
相关推荐
ac.char2 分钟前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
每天开心14 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry21 分钟前
uniapp三步完成一维码的生成
前端·vue.js
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister1 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
用户26124583401612 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川2 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术3 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
呆呆的心5 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再5 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down