如何在数据表中导出的pdf中添加水印图像

Question

我正在使用数据表以表格格式显示数据，并提供了导出选项，可将数据导出为 csv 、 pdf 。现在我想将水印图像添​​加到从数据表中的按钮下载的 pdf 中。

这是我尝试过的代码，但它对我不起作用，

var table = $('#holiday').DataTable( {
                    "dom": '<"nav" B>lfrtip',
                    "buttons": [
                                'excelHtml5',
                                'csvHtml5',
                                {
                                    extend: 'pdfHtml5',
                                    customize: function ( doc ) {
                                    doc.content.splice( 1, 0, {
                                          margin: [ 20, 20, 20, 20 ],
                                          alignment: 'center',
                                          image:'data:image/png;base64,abcdddd'
                                }]  });

我也尝试使用水印代替图像，但我没有得到结果。请帮助我解决这个问题。在此先感谢

Answer 1

我认为他们已经添加了水印选项。

https://github.com/bpampuch/pdfmake/pull/492

所以这可以使用 pdfmake v0.1.27

customize: function ( doc ) {doc.watermark = {text: 'watermark text', color: 'blue', opacity: 0.1}; 

Answer 2

您好 @user3933674，因为您想要从导出数据表中获得的 pdf 水印。

我认为这还不可能，因为在 pdfmake 的文档 http://pdfmake.org/#/gettingstarted 中没有提到将图像（水印）设置为背景。

要在 PDF 中插入图像，请找到以下代码。

 $('#example').DataTable( { 
    dom: 'Bfrtip',
    buttons: [
    {
        extend: 'pdfHtml5',
        customize: function ( doc ) {
            doc.content.splice( 0, 0, {
                margin: [ 0, 0, 0, 12 ],
                alignment: 'center',
                image: 'based64 encoded image'
            } );
        }
    }                 
    ]
 } );

为了您的参考，我提供了将自定义图像插入到数据表的 pdf 导出中的演示。 https://jsfiddle.net/Prakash_Thete/rbunuv9b/1/