0

我正在做一个小项目，通过我在 Vue + Laravel 中构建的界面创建多个 CV（或简历），然后我可以将其导出为 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 损坏或看起来损坏。

我的堆栈：

  • 拉拉维尔
  • Vue.js
  • 尾风CSS
  • Laravel-DOMPDF

如果有人可以就解决此问题的最佳方法提出建议，我将不胜感激。

TIA

4

1 回答 1

1

由于您没有提到转换后的页面是在 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', 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;

    }
}

所以这是我的函数，downloadFull(t)它将是文件类型，您可能不需要它，或者您可以使用简单的 if/else 来改进它，无需切换，首先您将导入如下库：

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

然后为 设置页面尺寸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();
        })
},

祝你好运。

于 2020-08-13T21:50:43.377 回答