1

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

这是我的应用程序的屏幕截图，无法渲染动态图像路径

在这里，我还包含了示例 JSON 数据的屏幕截图，其中包含图像的路径

4

1 回答 1

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并后退一步以获取保存图像的公共路径

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

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

于 2020-09-29T08:53:56.683 回答