html-pdf:css和js文件似乎没有被处理 [英] html-pdf: css and js files do not appear to be processing

问题描述

我正在浏览一个网页，使用jquery将页面加载到document.ready上，使用CSS格式化页面，使用node.js http从服务器检索页面，使用html-pdf将html转换为pdf文件.至此，我将文件作为电子邮件附件发送.最终目标是创建发票.问题在于，当位于外部文件中时，css和js似乎没有被处理.我希望保留在外部文件中，但需要使用jquery填充document.ready上的页面，并使用CSS正确格式化页面.另外，我在混合物中添加了cheerio，以查看是否可以确保处理正确进行并且没有帮助.该代码概述如下:

I am taking a webpage, using jquery to load the page on document.ready, css to format the page, node.js http to retrieve the page from the server, html-pdf to convert the html to a pdf file. From this point, I am sending the file as an email attachment. The ultimate goal is to create an invoice. The issue is that the css and js do not appear to be processing when it is in external files. I would prefer to keep in external files but need jquery to populate the page on document.ready and the css to properly format the page. Also, I added cheerio to the mix to see if that would make sure the processing occurred correctly and it did not help. The code is outlined below:

email sending code:
    var transporter = nodemailer.createTransport({
        service: 'gmail',
        host: this.hostname,
        auth: {
            user: this.smtpusername,
            pass: this.smtppassword
        }
    });

    var mailOptions = {
        from: fromaddress, // sender address
        to: toaddresslist, // list of receivers
        subject: subject, // Subject line
        html: text
    };

    if (attachments){
        mailOptions.attachments = [
            {   // binary buffer as an attachment
                filename: 'invoice.pdf',
                content: attachments,
                contentType: 'application/pdf',
                encoding: 'base64'
            }
        ];
    }

html conversion code:
                let body = [];
                var options = {
                  host: 'localhost',
                  path: '/invoice/' + invoiceid,
                  port: '3000'
                };

                http.request(options, function(response){
                  response.on('data', function (chunk) {
                      body.push(chunk);
                  });

                  response.on('end', function () {
                    let buffer = '';
                    buffer = Buffer.concat(body).toString();
                    let $ = cheerio.load(buffer);
                    let newdocument = $.html();
                    console.log(newdocument);

                    pdf.create(newdocument, {
                        directory: "tmp",
                        format: "letter",
                        orientation: "portrait",
                        zoomFactor: ".5", // default is 1 
                        type: "pdf",
                        quality: "75"
                    }).toBuffer(function(err, newbuffer){
                        if (err){
                            reject(err);
                        }

                        if (Buffer.isBuffer(newbuffer)){
                            resolve(newbuffer);
                        } else {
                            reject(new Error('The pdf file could not be generated at this time.  Please try again later.'));
                        }
                    });
                  });
                })
                .end();

当我检查电子邮件时，我得到的是pdf，但没有显示我从api调用中期望的数据，并且格式已不正确.我尝试将css代码移动到文档中以进行测试，尽管css仍处于关闭状态，但很明显，在这种情况下可以看到css.

When I check the email, I am getting the pdf, but is does not appear populated with the data I expect from the api call and the formatting is way off. I tried to move the css code inside the document for testing purposes, and though the css was still off, it was clear it was able to see the css in this scenario.

1)如何获取html-pdf包以识别和处理外部css和js文件?

1) How can I get html-pdf package to recognize and process the external css and js files?

2)html-pdf可与div或表一起使用哪种类型的html格式?

2) What type of html formatting does the html-pdf work with, div or tables?

推荐答案

您是否尝试过为CSS文件使用绝对链接?在html头部分?

Have you tried to use absolute links for your css files ? On the html head section ?

<link rel='stylesheet' type='text/css' href='http://www.url.com/css/my.css' />

使用 http://localhost:3000 可能是您在使用localhost时遇到的情况.

use http://localhost:3000 might be the case for you as you are using localhost.

确保您还具有在nodejs服务器配置中正确设置的路径. (否则您将收到404错误).

Make sure you also have the paths properly set up in the nodejs server configuration. (otherwise you will get a 404 error).

我也在他们的存储库中找到了这个线程. https://github.com/marcbachmann/node-html-pdf/issues/13

Edit : I have also found this thread on their repository. https://github.com/marcbachmann/node-html-pdf/issues/13

希望这会有所帮助.

这篇关于html-pdf:css和js文件似乎没有被处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！