使用Express html-pdf包时图像不是从动态图像路径渲染的

问题描述

我正在使用Html-pdf软件包在Express-MongoDB应用程序中生成和下载pdf。这是我使用Html-pdf软件包的路线。

//@route - GET /generate PDF
router.get("/generateReport/:id",async (req,res) => {

    const tableDataById = await newsModel.findById(req.params.id);
    ejs.renderFile(path.join(__dirname,'../views/pages/',"pdf.ejs"),{output:tableDataById},(err,data) => {
        
        if (err) {
            res.send(err);
        } else {
            var assesPath = path.join('file://',__dirname,'../public/');
            assesPath = assesPath.replace(new RegExp(/\\/g),'/');

            var options = {
                "height": "11.25in","width": "8.5in","header": {
                    "height": "20mm",},"footer": {
                    "height": "20mm","base": "file:///" + assesPath
            };
            pdf.create(data,options).toBuffer(function (err,buffer) {
                 if (err) {
                     res.send(err);
                 } else {    
                     res.type('pdf');
                     res.end(buffer,'binary')
                 }
             });
        }
    });
});

我使用过ejs模板引擎。这是我在上述路由中呈现的“ pdf.ejs”文件的代码。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img class="card-img-top"  src="<%= output.newspapers[0].logo %>"> 
            <h1><%= output.newspapers[0].newsPaperName %></h1>
        </div>
        <div class="text-center">
            <img class="img-fluid" id="test" src="<%= output.image %>" alt="">
        </div>
    </div>
</div>

Here is the screenshot of my application,which failed to render the dynamic image path

Here,I've also included a screenshot of the sample JSON data,in which the path of the images is included

解决方法

Image src需要绝对路径，以便从要生成为pdf文件的ejs文件中呈现动态图像路径。

在您的控制器内部，而不是这样做：

ejs.renderFile(path.join(__dirname,'../views/pages/',"pdf.ejs"),{output:tableDataById}

执行此操作：发送包含绝对路径的变量

ejs.renderFile(path.join(__dirname,{output:tableDataById,dirname: __dirname}

并在ejs文件中而不是这样做：

<img class="img-fluid" id="test" src="<%= output.image %>" alt="">
            

执行以下操作：：添加变量 dirname ，然后退一步以获取保存图像的公共路径

<img class="img-fluid" id="test" src="<%= dirname %>/../public/<%= output.image %>" alt="">

希望这将有助于解决您的问题。祝您编码愉快！