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文件后下载文件
相关推荐
渔舟唱晚@18 分钟前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
远方16092 小时前
18-Oracle 23ai JSON二元性颠覆传统
数据库·oracle·json
鱼樱前端2 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846953 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea
满分观测网友z3 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu3 小时前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
鱼樱前端3 小时前
Vue3结合three和babylonjs实现3D数字展厅效果
前端·vue.js
Themberfue3 小时前
Vue ⑥-路由
前端·javascript·vue.js
kooboo china.3 小时前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解
前端·css·人工智能·编辑器·html·交互
陪我一起学编程4 小时前
关于nvm与node.js
vue.js·后端·npm·node.js