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文件后下载文件
相关推荐
银色的白2 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
萌萌哒草头将军3 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
Jimmy3 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz3 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
软件开发技术深度爱好者4 小时前
HTML版英语学习系统
学习·html
python_chai5 小时前
Django核心知识点全景解析
python·json
Shimeng_19897 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
MZWeiei8 小时前
MVVM 模式,以及 Angular、React、Vue 和 jQuery 的区别与关系
vue.js·react.js·angular.js
述雾学java8 小时前
Spring Boot + Vue 前后端分离项目解决跨域问题详解
vue.js·spring boot·后端
空城机9 小时前
从零打造前沿Web聊天室:消息系统
前端·vue.js