Javascript 使用nodejs从json生成.html文件_Javascript_Html_Node.js

Javascript 使用nodejs从json生成.html文件

javascript html node.js

Javascript 使用nodejs从json生成.html文件,javascript,html,node.js,Javascript,Html,Node.js,我正在使用Node.js进行自动化工作，我有JSON数据，我希望在每个间隔后从这些数据生成html文件。例如，我有一个从数据库中检索所有JSON数据的函数，现在我希望它能够自动生成.html文件，并从给定的JSON数据生成路径。我怎样才能做到这一点？是否有任何节点库或示例可以执行此操作？这是我的json： [ { id: '5ffee71aef57d4cf197729a5', date_checked: '2021-02-11T07:56:39.042Z', titl

我正在使用Node.js进行自动化工作，我有JSON数据，我希望在每个间隔后从这些数据生成html文件。例如，我有一个从数据库中检索所有JSON数据的函数，现在我希望它能够自动生成.html文件，并从给定的JSON数据生成路径。我怎样才能做到这一点？是否有任何节点库或示例可以执行此操作？这是我的json：

[
 {
    id: '5ffee71aef57d4cf197729a5',
    date_checked: '2021-02-11T07:56:39.042Z',
    title: 'Notification with API',
    status: 'created',
    reach: null,
    sent: null,
    delivered: null,
    views: null,
    clicks: null,
    unsubscribers: null
  },
  {
    id: '5ffee71aef57d4cf197729a5',
    date_checked: '2021-02-11T07:56:39.042Z',
    title: 'Notification with API',
    status: 'created',
    reach: null,
    sent: null,
    delivered: null,
    views: null,
    clicks: null,
    unsubscribers: null
  }
]

我创建了一个用于生成html文件的示例html模型

htmlkit.ts

此脚本为您创建简单的html json 您可以展开columns数组，以添加希望位于表中的其他字段

常量fs=需要“fs” 常量列=[]；用于json中的let名称[0]{ 如果！json[0].hasOwnPropertyname继续； columns.pushname； } 常量html=；对于列的let项{ html+=+项目+； } html+=；对于json的let项{ html+=；用于列的let名称{ html+++项目[名称]+； } html+=； } html+=； file.writeFileSyncnew Date.getTime.toString+'.html'，html；

你可以简单地为html创建一个模型，然后使用writefilesync作为字符串写入文件。如果你也能描述一下你想要什么类型的html，那就太好了。我需要更清楚一些，你到底想要实现什么？只是为了美化JSON，它与HTML表有关吗？我已经在您的答案中添加了代码。只需使用ES6语法将数据附加到html中即可string@SrinathKamath是否有任何参考或例子来实现它？我不明白，你能分享任何回购参考或structure@prashantpadadune，我已经创建了一个模型aka类来处理html标记插入，以供genric使用。您可以引用html.generator.js来初始化该类的实例，然后使用htmlkit类的doc对象来创建包装器、表或htm元素。这太糟糕了，我该如何向其中添加样式？我该如何将writeFileSync路径更改为另一个directorFor styles您可以向任何标记添加属性类或样式，例如，要为不同的目录创建表或TDO，请使用以下代码文件：writeFileSyncpath+new Date.getTime.toString+'.html'，html；添加样式最简单的方法是连接引导程序在和之间添加它，然后添加类这里有没有干净的方法来实现这个方法？这正是我想要的，但我想重用这个@Mike Malyi

const { isUndefined } = require("lodash");

module.exports = class HTMLKit {

    data = [];
    curr_x = 0;
    curr_y = 0;
    fontSize = 'medium';

    constructor() { }

    x_pos = (spaces) => {
        this.data.push('&nbsp;'.repeat(spaces));
        this.curr_x = spaces;
    }
    y_pos = (lines) => {
        this.data.push('<div></div>'.repeat(lines));
        this.curr_y = lines;
    }
    text = (t_data, spaces, lines, fontSize = null) => {
        this.data.push(t_data);
    }
    td = (t_data, t_class = "") => {
        this.data.push(`<td class='${t_class}'>${t_data}</td>`)
    }
    tr = (action) => {
        this.data.push((action == 'start') ? '<tr>' : '</tr>');
    }
    tbl = (action, def = [], tbl_class) => {
        var thString = ``;
        def.forEach(th => {
            thString += `<th class='${th}'></th>`
        });
        this.data.push((action == 'start') ? `<table class='${tbl_class}'>${thString}` : '</table>');
    }
    wrap = (action, w_class) => {
        this.data.push((action == 'start') ? `<div class='${w_class}'>` : `</div>`)
    }
    setGlobFontSize = (font_size_index) => {
        const fontSizeArr = ['small', 'medium', 'large']
        this.fontSize = fontSizeArr[font_size_index];
    }
    getGlobFontSize = () => {
        return `<style>html, body, div, span{font-size: ${this.fontSize} !IMPORTANT;}</style>`;
    }
}

html.generator.js

const doc = new DOC();
const styles = STYLES.tr_styles;

doc.text(`<html>${styles}<body>`)
        data.forEach(el => {
            var p_mode = getPaymentMode(el.paymentmode);
            var t_type = getTransType(el.transtype);

            doc.setGlobFontSize(0)
            doc.wrap('start', 'container')
            doc.tbl('start', ["col-1", "col-2", "col-3"], 'tbl-class')
            doc.tr('start')
            doc.td('some data here')
            doc.tr('end')
            doc.tbl('end')
            doc.wrap('close', 'container')
        });
        doc.text(`</body></html>`)
        textData = doc.data.join('');

        fs.writeFileSync(f_name, textData, (err) => {
            if (err) throw err;
            // console.log('HTML Generated')
        });
        return { "status": true, "error": "OK" };

html.models.js

module.exports.fd_styles = `<style type="text/css"> @page{size:8in 6in;margin:0}body{font-size:small;margin:0;padding:0}div.container{width:21cm;height:15.24cm;padding:0}table{column-gap:10px;padding:0 45px 0 60px;width:100%;font-size:small}th.dummy-8{width:8%}th.dummy-10{width:10%}th.dummy-20{width:20%}th.dummy-15{width:15%}th.dummy-0-5{width:20%}th.dummy-25{width:25%}th.dummy-30{width:30%}td{height:25px}thead{height:0}.details{position:relative;top:calc(70px + 20px)}.details-1{position:relative;top:calc(70px + 20px)}.details-2{position:relative;top:calc(70px + 15px)}.details-3{position:relative;top:calc(70px + 10px)}.details-4{position:relative;top:calc(70px)}.details-5{position:relative;top:calc(70px + 10px)}.details-6{position:relative;top:calc(70px + 15px)}.center{text-align:center} </style>`;