Node.js 使用CSS3支持将HTML页面转换为PDF

我正在做一个小项目，通过我在Vue+Laravel中构建的界面创建多份简历（或简历），然后将其导出为PDF

我在导出PDF时遇到了问题。Laravel DOMPDF不允许在PDF中包含CSS3属性，例如flex或CSS变量。我相信PDF只支持CSS 2.0，但我已经看到多个PDF被导出，它们都是网站的精确副本。例如，当您通过他们的网站创建简历时，他们可以将其导出，使其看起来与网站版本完全相同

我的问题是：是否有人知道我可以使用一个与Vue或Laravel关联的库，将网站模板的复写副本生成PDF

我尝试了一些JS库，它们可以截取页面上某些元素的屏幕，然后尝试将它们组合在一起，但就是不起作用。我基本上需要在页面上的一个特定元素是可选择的，然后保存到一个PDF。请参见下面的示例：

如您所见，白色区域是CV预览，因此我需要将整个部分保存为PDF，减去右侧菜单和顶部栏。我计划构建一些非常酷的模板，但如果我不能使用现代CSS实践，那么将很难将它们制作成PDF

目前，我有两个视图，一个是CV预览，您可以在上面看到，另一个视图重新使用PDF模板中插入的部分。显然，重用应用了现代CSS的部分会使PDF崩溃或看起来崩溃

我的堆栈：

• 拉维尔
• Vue.js
• 尾风
• 拉韦尔多姆酒店

如果有人能建议最好的方法，我会非常感激

---

TIA

因为您没有提到转换的页面是在Vue或Blade中，所以我将双向解释

这里是，你所需要的就是设计一个刀片视图，然后做类似的事情

Route::get('/doc', function () {
//
    $data = Marketers::all();

    // LoadView with $data
    $pdf = PDF::loadView('pdf',$data)->setPaper('A4');

    // LoadView with Compact
    $pdf = PDF::loadView('pdf',compact('data'))->setPaper('A4');

    // Then Download it
    return $pdf->download('pdf.pdf');
});

现在在Vue中，您需要和或

我使用了

htmlotimage

，因为我在波斯语中遇到了一些字符问题，所以我将基于

htmlotimage

库帮助您

 <template>
        // Part you want to Convert to pdf or ...
        <div  ref="contentz" id="jsPdf" >
        // Contents
        <div/>
 </template>

downloadFull(t) {
    let self = this
    switch (t) {
        case 1:
            const doc = new jsPDF("l", "mm", "a4");
                htmlToImage.toCanvas(document.getElementById('jsPdf'))
                    .then(function (canvas) {

                        var img = canvas.toDataURL("image/jpeg");
                        var width = doc.internal.pageSize.getWidth();
                        var height = doc.internal.pageSize.getHeight();
                        doc.addImage(img, 'JPEG', 0, 0, width, 0);
                        doc.save('app.pdf');


                    })
                    .catch(function (error) {
                        self.$notifications.failedNotificationOnGetData(self)
                    });
            break;
        case 2:
                htmlToImage.toJpeg(document.getElementById('jsPdf'), { quality: 1 })
                    .then(function (dataUrl) {
                        var link = document.createElement('a');
                        link.download = 'kalabala.jpeg';
                        link.href = dataUrl;
                        link.click();
                    })
                    .catch(function (error) {
                        self.$notifications.failedNotificationOnGetData(self)
                    });
            }
            break;
        default:
            break;

    }
}

然后为

jsPDF

设置页面尺寸，然后简单地使用

HtmlToImage

获取画布，然后使用变量设置宽度、高度和图像画布，然后简单地将图像添加到

doc

并保存它。我的函数是相同的，但在第一种切换情况下，我将获得

PDF

，在第二种情况下，我将获得

JPEG

如果您尝试使用第一种方法，但在Vue页面中获得下载链接，则必须按照上面的说明执行控制器，然后在

Vue

中执行API调用时，应使用BLOB下载文件。下面是一个例子：

getPDF(type) {
    axios({
        url : '/api/api_name/exportPDF',
        method: 'POST',
        responseType: 'blob'
    })
        .then(res => {

            const url = window.URL.createObjectURL(new Blob([res.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'pdf.pdf');
            document.body.appendChild(link);
            link.click();
        })
},

---

祝你好运。

谢谢你的回答，非常感谢。这也适用于多个页面吗？我现在正试着用Laravel Snappy。这是一个刀片模板，将用于转换为PDF。@Matt well ofc它会工作，但您必须了解获得结果的逻辑。如果你测试了这个，并且它成功了，请标记答案，然后用另一个问题解释你想要什么，你的逻辑是什么，以帮助你在另一个主题上。还有其他方法，但是，我试着在这个答案中解释这3种方法可以得到的最简单/合法的答案。

getPDF(type) {
    axios({
        url : '/api/api_name/exportPDF',
        method: 'POST',
        responseType: 'blob'
    })
        .then(res => {

            const url = window.URL.createObjectURL(new Blob([res.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'pdf.pdf');
            document.body.appendChild(link);
            link.click();
        })
},