0

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

在此处输入图像描述

4

2 回答 2

2

我使用代码片段重新创建了相同的问题。

它实际上工作得很好，没有任何模糊

控制器：

@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();
})

结果图像

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

于 2019-12-30T16:18:44.597 回答
0

我更喜欢 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)
于 2020-09-29T19:28:51.833 回答