借助CSS3支持将HTML页面转换为PDF

如何解决借助CSS3支持将HTML页面转换为PDF

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

导出PDF时出现问题。 Laravel DOMPDF不允许我在PDF中使用CSS3属性，例如flex或CSS变量。我相信PDF仅支持CSS 2.0，但我看到有多个PDF导出，它们是网站的精确副本。例如，resume.io-当您通过他们的网站创建简历时，他们可以将其导出并使其外观与网站版本完全相同。

我的问题是：有谁知道我可以使用将Vue或Laravel与网站模板抄录成PDF的图书馆吗？

我已经尝试了一些JS库，这些库会捕获页面上某些元素的屏幕截图，然后尝试将它们组合在一起，但这是行不通的。我基本上需要页面上的特定元素可供选择，然后保存为PDF。请在下面查看我的示例：

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

此刻，我有两个视图，您可以在上面看到CV预览，然后是另一个视图，它可以重复使用PDF模板中插入的局部视图。但是，显然，重用应用了现代CSS的局部函数会使PDF中断或看上去中断。

我的堆栈：

Laravel
Vue.js
TailwindCSS
Laravel-DOMPDF

如果有人可以建议最好的解决方法，我将非常感谢。

TIA

解决方法

由于您没有提到转换后的页面是在Vue或Blade中，因此我将同时说明。

这里是Library，您所需要做的就是设计一个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中，您需要jsPDF和htmlToCanvas或htmlToIMage

我之所以使用HTMLtoImage，是因为我遇到了波斯语的一些字符问题，因此我将根据HtmlToImage库来帮助您。

 <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',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;

    }
}

所以这是我的函数，其中downloadFull(t) t将是文件类型，您可能不需要它，或者可以通过简单的if / else不用开关来改进它，首先，您将导入： >

import jsPDF from 'jspdf';
import htmlToImage from 'html-to-image';

然后为jsPDF设置页面尺寸，然后只需使用HtmlToImage来获取Canvas，然后使用变量设置宽度，高度和图像Canvas，然后只需将图像添加到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();
        })
},

祝你好运。

借助CSS3支持将HTML页面转换为PDF

如何解决借助CSS3支持将HTML页面转换为PDF

解决方法

相关推荐