使用 express html-pdf 包时，图像未从动态图像路径呈现

Question

我正在使用 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

Answer 1

Image src 需要绝对路径，用于从要生成为 pdf 文件的 ejs 文件渲染动态图像路径。

在你的控制器中，而不是这样做：

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

这样做：发送一个包含绝对路径的变量

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

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

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

这样做： 添加变量 dirname 并返回到 public 您保存的路径你的形象

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

希望这对解决您的问题有所帮助。编码愉快!!

使用 express html-pdf 包时，图像未从动态图像路径呈现

Image is not rendering from dynamic image path while using express html-pdf package

pdf

ejs

mongodb

express

html-pdf