使用 pdfkit 在生产环境中下载为 PDF 时 PDF 图像模糊 python

Question

我正在使用 pdfkit 库将 Html 转换为 pdf，然后在转换 pdf 后将其转换为 base64(String) 并将其作为 API 响应发送。在前端 (React) 收到 base64(String) 并使用 base64(String) 创建一个元素以下载为 pdf。但是下载pdf后，所有图片都变模糊了。

Html 到 Pdf 转换器 ApiClass:

class BasicTutorCVPDF(Resource):
@staticmethod
@is_user_authenticate()
def get(_id):
    try:
        context = TutorModel.profile_info(_id)
        html = render_template("tutorCVPDF.html", context=context)

        options = {
            'page-size': 'A4',
            'margin-top': '0.75in',
            'margin-right': '0.75in',
            'margin-bottom': '0.75in',
            'margin-left': '0.75in',
        }
        pdfkit.from_string(html, 'public/pdf/tutor_cv.pdf', options=options)
        with open("public/pdf/tutor_cv.pdf", "rb") as file:
            encode_string = base64.b64encode(file.read())

        data = str(encode_string).split("'")[1]

        return (ResService.success(None, data), ResService.success(None, data)['status']) if data else \
            (ResService.not_acceptable(), ResService.not_acceptable()['status'])
    except Exception as err:
        LOG.report(err)
        return ResService.bad_request(), ResService.bad_request()['status']

Html 模板：

<tr>
    <td style="text-align: left; width: 280px;">Tutor ID : </td>
    <td>{{ context['user_info']['id'] }}</td>
    <td rowspan="5" style="text-align: right;"><img src="{{ context['user_info']['photo'] }}" style="height: 160px; width: 160px;" alt=""></td>
</tr>

前端接收Base64(String):

export const fetchTutorCVPDF = (tutorId) => dispatch => {
    req.getRequest({
        url: Constants.STATIC + 'tutor-cv-pdf/' + tutorId, auth: 'bearer', }, (cb) => {
        const linkSource = `data:application/pdf;base64,${cb}`;
        const downloadLink = document.createElement("a");
        const fileName = "cv_" + tutorId + ".pdf";

        downloadLink.href = linkSource;
        downloadLink.download = fileName;
        downloadLink.click();
    })
};

已下载 PDF：

Answer 1

我使用代码片段重现了同样的问题。

实际上效果很好，没有任何模糊

控制器：

@app.route('/')
def hello_world():
    pdffile_content = render_template('template.html')
    options = {
        'page-size': 'A4',
        'margin-top': '0.75in',
        'margin-right': '0.75in',
        'margin-bottom': '0.75in',
        'margin-left': '0.75in',
    }
    pdfkit.from_string(pdffile_content, 'tutor_cv.pdf', options=options)
    with open("tutor_cv.pdf", 'rb') as file:
        encoded = base64.b64encode(file.read())
    data = str(encoded).split("'")[1]
    return data, 200

模板：

<tr>
    <td style="text-align: left; width: 280px;">Tutor ID : </td>
    <td>123123123123</td>
    <td rowspan="5" style="text-align: right;"><img src="https://cdn130.picsart.com/286240699000211.png?r1024x1024" style="height: 160px; width: 160px;" alt=""></td>
</tr>

JS代码：

fetch('/').then((result) => result.text()).then(function(result){
    const linkSource = `data:application/pdf;base64,${result}`;
    const downloadLink = document.createElement("a");
    const fileName = "cv.pdf";

    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
})

Result Image

我认为主要问题根本不在 pdfkit，我认为原始 CV 模板（不是问题中的那个）有一些 css 导致这种情况发生的样式。

Answer 2

我更喜欢 svg 图片，它与 django 和 pdfkit 完美配合

模板：

<img src={{svg_url}}>

查看

svg_url = 'http://127.0.0.1:8000/static/images/qrcode.svg/'
template = get_template('path_to/template.html')
html = template.render({'svg_url ':svg_url })
pdfkit.from_string(html, 'output.pdf',configuration=config)

使用 pdfkit 在生产环境中下载为 PDF 时 PDF 图像模糊 python

PDF images blurry when download as PDF in production with pdfkit python

javascript

flask

reactjs

python-pdfkit

python-3.6