{"id":255,"date":"2024-01-28T14:32:42","date_gmt":"2024-01-28T07:32:42","guid":{"rendered":"https:\/\/phusingdev.info\/?p=255"},"modified":"2024-02-05T09:24:14","modified_gmt":"2024-02-05T02:24:14","slug":"datatable-export-pdf-%e0%b8%a3%e0%b8%ad%e0%b8%87%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b8%a0%e0%b8%b2%e0%b8%a9%e0%b8%b2%e0%b9%84%e0%b8%97%e0%b8%a2","status":"publish","type":"post","link":"https:\/\/phusingdev.info\/?p=255","title":{"rendered":"DataTable export pdf \u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22"},"content":{"rendered":"\n

\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e19\u0e35\u0e49\u0e40\u0e23\u0e32\u0e08\u0e30\u0e21\u0e32\u0e41\u0e01\u0e49 DataTable \u0e40\u0e27\u0e25\u0e32 Export \u0e40\u0e1b\u0e4a\u0e19\u0e44\u0e1f\u0e25\u0e4c PDF \u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\u0e41\u0e25\u0e49\u0e27\u0e2d\u0e48\u0e32\u0e19\u0e44\u0e21\u0e48\u0e2d\u0e2d\u0e01 \u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e27\u0e48\u0e32\u0e2b\u0e25\u0e32\u0e22\u0e46\u0e04\u0e19\u0e04\u0e07\u0e40\u0e08\u0e2d\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e19\u0e35\u0e49\u0e01\u0e31\u0e19\u0e2d\u0e22\u0e39\u0e48 \u0e41\u0e25\u0e30\u0e01\u0e33\u0e25\u0e31\u0e07\u0e2b\u0e32\u0e27\u0e34\u0e18\u0e35\u0e41\u0e01\u0e49 \u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e2d\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c PDF \u0e19\u0e31\u0e49\u0e19\u0e43\u0e0a\u0e49 pdfmake library \u0e43\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19 \u0e42\u0e14\u0e22\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23 \u0e40\u0e23\u0e32\u0e21\u0e35\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e08\u0e32\u0e01\u0e44\u0e1f\u0e25\u0e4c vfs_fonts.js<\/p>\n\n\n\n

\u0e04\u0e25\u0e34\u0e01\u0e02\u0e27\u0e32\u0e17\u0e35\u0e48\u0e25\u0e34\u0e49\u0e07\u0e04\u0e4c\u0e41\u0e25\u0e49\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01 save as \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 vfs_fonts.js<\/a> \u0e2b\u0e23\u0e37\u0e2d\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e1a\u0e1a CDN \u0e01\u0e47\u0e44\u0e14\u0e49\u0e40\u0e0a\u0e48\u0e19\u0e01\u0e31\u0e19<\/p>\n\n\n\n

<script src=\"vfs_fonts.js\"><\/script><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e40\u0e23\u0e32\u0e21\u0e32\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e0a\u0e37\u0e48\u0e2d  Font \u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a pdfmake \u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 javascript  \u0e43\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e23\u0e32\u0e08\u0e30\u0e43\u0e0a\u0e49  THSarabun<\/p>\n\n\n\n
pdfMake.fonts = {\n      THSarabun: {\n             normal: 'THSarabun.ttf',\n             bold: 'THSarabun-Bold.ttf',\n             italics: 'THSarabun-Italic.ttf',\n             bolditalics: 'THSarabun-BoldItalic.ttf'\n      }\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e2a\u0e38\u0e14\u0e17\u0e49\u0e32\u0e22\u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e43\u0e19\u0e17\u0e35\u0e48\u0e19\u0e35\u0e49\u0e40\u0e23\u0e32\u0e08\u0e30\u0e40\u0e19\u0e49\u0e19\u0e44\u0e1b\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e2d\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e1b\u0e47\u0e19 PDF<\/p>\n\n\n\n
 var dataTable = $(\"#dataTable\").DataTable({\n      lengthChange: false,\n      responsive: true,\n      dom: \"Bfrtip\",\n      buttons: [\n        \"csv\",\n        \"excel\",\n        {\n          extend: \"pdf\",\n          text: \"PDF\",\n          pageSize: \"LEGAL\",\n          orientation: \"portrait\", \/\/'landscape',\n          title: \"\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\",\n          exportOptions: {\n            columns: [0, 1, 2, 3, 4],\n          },\n          customize: function (doc) {\n            \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14 style \u0e2b\u0e25\u0e31\u0e01\n            doc.defaultStyle = {\n              font: \"THSarabun\",\n              fontSize: 12,\n            };\n            doc.content[1].table.widths = [\"10%\", \"20%\", \"20%\", \"20%\", \"20%\"];\n            doc.styles.tableHeader.fontSize = 14;\n            var rowCount = doc.content[1].table.body.length;\n            for (i = 1; i < rowCount; i++) {\n              doc.content[1].table.body[i][0].alignment = \"center\";\n              doc.content[1].table.body[i][1].alignment = \"center\";\n              doc.content[1].table.body[i][2].alignment = \"center\";\n              doc.content[1].table.body[i][3].alignment = \"center\";\n              doc.content[1].table.body[i][4].alignment = \"center\";\n            }\n          },\n        },\n      ],\n    });\n    dataTable.buttons().container().appendTo(\"#dataTable .col-md-6:eq(0)\");<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e43\u0e19\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e48\u0e19 \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 customize \u0e40\u0e1b\u0e47\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07 pdfmake \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e39\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e04\u0e48\u0e32\u0e15\u0e48\u0e32\u0e07<\/p>\n\n\n\n
\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48\u0e25\u0e34\u0e49\u0e07\u0e04\u0e4c\u0e19\u0e35\u0e49   Link<\/a><\/p>\n\n\n\n
\u0e40\u0e23\u0e32\u0e21\u0e32\u0e14\u0e39\u0e42\u0e04\u0e49\u0e14\u0e41\u0e1a\u0e1a\u0e40\u0e15\u0e47\u0e21\u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e01\u0e31\u0e19 <\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"utf-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n  <title>examples<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300&display=swap\" rel=\"stylesheet\" \/>\n  <link href=\"https:\/\/cdn.datatables.net\/responsive\/2.4.1\/css\/responsive.bootstrap5.min.css\" rel=\"stylesheet\" \/>\n  <link href=\"https:\/\/cdn.datatables.net\/1.13.4\/css\/dataTables.bootstrap5.min.css\" rel=\"stylesheet\" \/>\n  <link href=\"https:\/\/cdn.datatables.net\/buttons\/2.3.6\/css\/buttons.bootstrap5.min.css\" rel=\"stylesheet\" \/>\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV\/Dwwykc2MPK8M2HN\" crossorigin=\"anonymous\" \/>\n<\/head>\n\n<body class=\"container\">\n  <h1>examples<\/h1>\n  <table id=\"dataTable\" class=\"table table-striped\" style=\"width: 100%\">\n    <thead>\n      <tr>\n        <th>\u0e25\u0e33\u0e14\u0e31\u0e1a<\/th>\n        <th>\u0e0a\u0e37\u0e48\u0e2d<\/th>\n        <th>\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23<\/th>\n        <th>\u0e1c\u0e39\u0e49\u0e23\u0e48\u0e27\u0e21\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23<\/th>\n        <th>\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e17\u0e31\u0e49\u0e07\u0e2a\u0e34\u0e49\u0e19<\/th>\n      <\/tr>\n    <\/thead>\n    <tbody>\n      <tr>\n        <td>1<\/td>\n        <td>\u0e42\u0e04\u0e07\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a<\/td>\n        <td>\u0e17\u0e14\u0e2a\u0e2d\u0e1a<\/td>\n        <td>\u0e17\u0e14\u0e2a\u0e2d\u0e1a<\/td>\n        <td>\u0e17\u0e14\u0e2a\u0e2d\u0e1a<\/td>\n      <\/tr>\n    <\/tbody>\n    <tfoot>\n      <tr>\n        <th>\u0e25\u0e33\u0e14\u0e31\u0e1a<\/th>\n        <th>\u0e0a\u0e37\u0e48\u0e2d<\/th>\n        <th>\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23<\/th>\n        <th>\u0e1c\u0e39\u0e49\u0e23\u0e48\u0e27\u0e21\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23<\/th>\n        <th>\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e17\u0e31\u0e49\u0e07\u0e2a\u0e34\u0e49\u0e19<\/th>\n      <\/tr>\n    <\/tfoot>\n  <\/table>\n\n  <script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.js\"><\/script>\n  <script src=\"https:\/\/cdn.datatables.net\/1.13.4\/js\/jquery.dataTables.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.datatables.net\/1.13.4\/js\/dataTables.bootstrap5.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.datatables.net\/buttons\/2.3.6\/js\/dataTables.buttons.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.datatables.net\/buttons\/2.3.6\/js\/buttons.bootstrap5.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.1.3\/jszip.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.datatables.net\/buttons\/2.3.6\/js\/buttons.html5.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.datatables.net\/buttons\/2.3.6\/js\/buttons.print.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.datatables.net\/buttons\/2.3.6\/js\/buttons.colVis.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.datatables.net\/responsive\/2.4.1\/js\/dataTables.responsive.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.datatables.net\/responsive\/2.4.1\/js\/responsive.bootstrap5.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdfmake\/0.1.53\/pdfmake.min.js\"><\/script>\n  <script src=\"vfs_fonts.js\"><\/script>\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js\"\n    integrity=\"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN\/o0jlpcV8Qyq46cDfL\"\n    crossorigin=\"anonymous\"><\/script>\n<\/body>\n\n<\/html>\n\n<script language=\"JavaScript\" type=\"text\/javascript\">\n  $(document).ready(function () {\n    pdfMake.fonts = {\n      THSarabun: {\n        normal: \"THSarabun.ttf\",\n        bold: \"THSarabun-Bold.ttf\",\n        italics: \"THSarabun-Italic.ttf\",\n        bolditalics: \"THSarabun-BoldItalic.ttf\",\n      },\n    };\n    var dataTable = $(\"#dataTable\").DataTable({\n      lengthChange: false,\n      responsive: true,\n      dom: \"Bfrtip\",\n      buttons: [\n        \"csv\",\n        \"excel\",\n        {\n          extend: \"pdf\",\n          text: \"PDF\",\n          pageSize: \"LEGAL\",\n          orientation: \"portrait\", \/\/'landscape',\n          title: \"\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\",\n          exportOptions: {\n            columns: [0, 1, 2, 3, 4],\n          },\n          customize: function (doc) {\n            \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14 style \u0e2b\u0e25\u0e31\u0e01\n            doc.defaultStyle = {\n              font: \"THSarabun\",\n              fontSize: 12,\n            };\n            doc.content[1].table.widths = [\"10%\", \"20%\", \"20%\", \"20%\", \"20%\"];\n            doc.styles.tableHeader.fontSize = 14;\n            var rowCount = doc.content[1].table.body.length;\n            for (i = 1; i < rowCount; i++) {\n              doc.content[1].table.body[i][0].alignment = \"center\";\n              doc.content[1].table.body[i][1].alignment = \"center\";\n              doc.content[1].table.body[i][2].alignment = \"center\";\n              doc.content[1].table.body[i][3].alignment = \"center\";\n              doc.content[1].table.body[i][4].alignment = \"center\";\n            }\n          },\n        },\n      ],\n    });\n    dataTable.buttons().container().appendTo(\"#dataTable .col-md-6:eq(0)\");\n  });\n<\/script><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n