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文件后下载文件
相关推荐
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了2 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
WildBlue2 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂2 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷2 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401612 小时前
vue学习路线(10.监视属性-watch)
前端·vue.js
wuxuanok3 小时前
Web前端开发-HTML、CSS
前端·css·html
慧一居士3 小时前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js