How to separate html from js file and display content?

Question

I have a code as follow:

var info = {
    "Company": "ABC",
    "Team": "JsonNode",
    "Number": 4,
    "Time": "1 day"
};

var layout = "<ol><li>Info: </li><ol><ul>Company:       {{info.Company}}</ul><ul>Team: {{info.Team}}</ul></ol><li>Number: {{info.Number}}</li><li>Time: {{info.Time}}</li><ol>";

function generatePdf(layout,info) 
{
    var wkhtmltopdf = require('wkhtmltopdf');
    console.log('generating pdf');
    wkhtmltopdf(layout, {
       //console.log('debug');
       output: './file.pdf',
       "viewport-size": "1280x1024",
       "page-width": "400",
       "page-height": "600"
    });
}
generatePdf(layout,info);

And now I can generate a pdf file but pdf file's content is not right. is is:

    1. Info:
    Company: {{info.Company}}

    Team: {{info.Team}}
    2. Number: {{info.Number}}
    3. Time: {{info.Time}}

My problems here are:

1: How to separate html template(var layout) to a file.

2: info.Company must be ABC, info.Number must be 4

Please give me a help!

Your template HTML is incorrect to begin with, you almost randomly open and close ul and ol elements and some data isn't even inside an li (that stands for list item if that gives you an indication of whats going on) - Also, how does company info with a submenu count every thing in the submenu as if its in the main menu (aka how can number be 4 when its the second in the primary list?) — somethinghere
– somethinghere, Commented Oct 6, 2015 at 11:31
@KarthickKumar or, if possible, your code in a SO snippet (its the document icon with the <> in it) — somethinghere
– somethinghere, Commented Oct 6, 2015 at 11:34

Karthick Kumar · Accepted Answer · 2015-10-06 11:37:52Z

1

please rearrange your layout variable like this and check

var layout = "<ol><li>Info: </li><ol><ul>Company:"+info.Company+"</ul><ul>Team: "+info.Team+"</ul></ol><li>Number:"+info.Number+"</li><li>Time:"+info.Time+"</li><ol>";

answered Oct 6, 2015 at 11:37

Karthick Kumar

2,3751 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Toandd Over a year ago

Could you please help with the first question? The second one is done!

Quesstor · Accepted Answer · 2015-10-06 12:44:50Z

1

If your javascript runs in Node.js you can use

var layout = require("./layout.json");

to get your layout from a file. I think on your webapp you use angular to replace {{var}} with its content, but if you generate a PDF there is no angular to write the values, meaning you have to do it in JS like this

layout.replace("{{info.Company}}",info.Company);

edited Oct 6, 2015 at 12:44

answered Oct 6, 2015 at 11:40

Quesstor

3022 silver badges8 bronze badges

3 Comments

Toandd Over a year ago

When I require .html file. an error occured. logs:(function (exports, require, module, __filename, __dirname) { <ol><li>Info: </ ^ SyntaxError: Unexpected token <

Quesstor Over a year ago

Quick fix: change layout.html to layout.json and put

"<ol><li>Info: </li><ol><ul>Company:       {{info.Company}}</ul><ul>Team: {{info.Team}}</ul></ol><li>Number: {{info.Number}}</li><li>Time: {{info.Time}}</li><ol>"

inside the layout.json

Toandd Over a year ago

Thanks! But If layout file very large (1000 lines). I think your solution will have some problems. Do you have another way?

Toandd · Accepted Answer · 2015-10-07 03:01:28Z

0

I found a solution from my friend: code as follow , and it work for my case. He used swig , a template engine:

// get json object from json file
var info = require('./data.json');

var wkhtmltopdf = require('wkhtmltopdf');
var swig  = require('swig');
// Compile a file and store it, rendering it later
var tpl = swig.compileFile('public/template.html');

var layout = tpl({ info: info});

function generatePdf(layout,info) {
    wkhtmltopdf(layout, {output: './file.pdf'});
  }
exports.create_pdf_file = function() {
    generatePdf(layout,info);
}

I post answer. maybe someone need it

answered Oct 7, 2015 at 3:01

Toandd

3201 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to separate html from js file and display content?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related