在React中渲染PDF并将其发送到Laravel API

时间:2018-12-19 16:07:41

标签: javascript php reactjs laravel pdf

所以我的问题是我正在使用 html2canvas和pdfmake.js 在React组件中渲染PDF。渲染后,我决定是否将其下载或在新选项卡中打开或通过电子邮件(使用静态电子邮件)发送。如果用户要使用第三个选项,则需要将pdf发送到他想要的电子邮件中。

这个想法是,当用户单击通过电子邮件发送的按钮时,axios实例将告诉我的Laravel API使用pdf并将其发送给所需的人。我的问题是,我似乎无法将生成的pdf或html(缺少CSS)传递给Laravel API进行发送。

这是绑定到按钮事件单击的功能。

createPDF = action => {
    html2canvas(document.getElementById('exportthis'),
    {
        width: 816, 
        height: 956, 
        logging: false
    })
    .then(async canvas => {
        const docDefinition = {
            content: [
                { image: canvas.toDataURL() , fit: [700, 700] },
            ],
            pageSize: 'A4',
            pageMargins: [10, 10, 10, 10]
        };

        switch(action) {
            case 'download':
                pdfMake.createPdf(docDefinition).download(`folio_${this.props.sale ? this.props.sale.document.series.folio : ''}`);
                break;
            case 'print':
                pdfMake.createPdf(docDefinition).print();
                break;
            default:
                // create axios for sending dataURL
                const res = await axios.post('/email-invoice', {
                    data: canvas.toDataURL(),
                    name: `folio_${this.props.sale ? this.props.sale.document.series.folio : ''}`,
                    user: 'carlos.palaciosrebollar@gmail.com'
                }, {
                    headers: {
                        'Authorization': `Bearer ${this.props.token}`
                    }
                });

                console.log(res);
        }
    });
 }

所以对于我的问题,我是否需要更改逻辑并在Laravel中创建PDF并将其发送回我的React前端,或者是否有办法将React中生成的pdf传递给Laravel,然后将其发送给该人

1 个答案:

答案 0 :(得分:0)

通常的方法是在Laravel中创建pdf,然后发送。

您必须考虑到某些操作对手机的要求非常高,例如,如果您将此逻辑放在客户端上。

因此,我建议您将此逻辑放在服务器端。更容易,更快,更安全。