Hướng dẫn how do i convert html to pdf from pdfmake? - làm cách nào để chuyển đổi html sang pdf từ pdfmake?

Question

html-to-pdfmake

PDFMake cho phép dễ dàng tạo PDF với JavaScript; Tuy nhiên, không có hỗ trợ của mã HTML, vì vậy tôi quyết định tạo một mô -đun để xử lý tính năng này.

Nội dung chính Show

html-to-pdfmake
Bản demo trực tuyến
Cách sử dụng
Trình duyệt
Tài liệu
Tùy chọn
Thẻ HTML được hỗ trợ
Thuộc tính CSS được hỗ trợ
Kiểu mặc định
Tùy chỉnh phong cách
Lớp CSS và phong cách
var htmlToPdfmake = require("html-to-pdfmake"); // or: // import htmlToPdfmake from "html-to-pdfmake"18
ngắt trang
Tính chất đặc biệt
Sử dụng với nút
Quyên tặng

Bản demo trực tuyến

Bạn có thể tìm thấy bản demo trực tuyến tại https://aymkdn.github.io/html-to-pdfmake/index.html

Cách sử dụng

Mô -đun này sẽ chuyển đổi một số mã HTML cơ bản và hợp lệ thành tương đương với PDFMake.

Nút

npm install html-to-pdfmake

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

Example:

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
 
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

Trình duyệt

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

Example:

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

Tài liệu

Tùy chọn

Một số tùy chọn có thể được chuyển đến chức năng

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

9 như một đối số thứ hai.

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

0

Nếu bạn sử dụng nút, thì bạn sẽ phải vượt qua đối tượng

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
 
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

0 (xem bên dưới).

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

2

Bạn có thể ghi đè các kiểu mặc định bằng

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
 
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

2 (xem bên dưới).

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

4

Trong một số trường hợp, bạn có thể thấy một số không gian trống trong PDF. Bởi vì loại bỏ chúng có thể khá tiêu thụ tài nguyên, tùy chọn là

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
 
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

5 theo mặc định.

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

6

Nếu bạn đang sử dụng

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
 
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

7 trong trình duyệt web với hình ảnh, thì bạn có thể đặt tùy chọn này thành

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);

/*
it will return:
{
  stack:[
    {
      text: 'My title',
      fontSize: 24,
      bold: true,
      marginBottom: 5,
      style: ['html-h2']
    },
    {
      text: [
        {
          text: 'This is a sentence with a '
        },
        {
          text: 'bold word',
          bold: true,
          style: ['html-strong']
        },
        {
          text: ', '
        },
        {
          text: 'one in italic',
          italics: true,
          style: ['html-em']
        },
        {
          text: ', and '
        },
        {
          text: 'one with underline',
          decoration: 'underline',
          style: ['html-u']
        },
        {
          text: '. And finally '
        },
        {
          text: 'a link',
          color: 'blue',
          decoration: 'underline',
          link: 'https://www.somewhere.com',
          style: ['html-a']
        },
        {
          text: '.'
        }
      ],
      margin: [0, 5, 0, 10],
      style: ['html-p']
    }
  ],
  style: ['html-div']
}
 */

8 và nó sẽ tự động tải hình ảnh của bạn trong PDF của bạn bằng tùy chọn PDFMake

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);

/*
it will return:
{
  stack:[
    {
      text: 'My title',
      fontSize: 24,
      bold: true,
      marginBottom: 5,
      style: ['html-h2']
    },
    {
      text: [
        {
          text: 'This is a sentence with a '
        },
        {
          text: 'bold word',
          bold: true,
          style: ['html-strong']
        },
        {
          text: ', '
        },
        {
          text: 'one in italic',
          italics: true,
          style: ['html-em']
        },
        {
          text: ', and '
        },
        {
          text: 'one with underline',
          decoration: 'underline',
          style: ['html-u']
        },
        {
          text: '. And finally '
        },
        {
          text: 'a link',
          color: 'blue',
          decoration: 'underline',
          link: 'https://www.somewhere.com',
          style: ['html-a']
        },
        {
          text: '.'
        }
      ],
      margin: [0, 5, 0, 10],
      style: ['html-p']
    }
  ],
  style: ['html-div']
}
 */

9.

Sử dụng tùy chọn này sẽ thay đổi đầu ra của

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
 
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

7 sẽ trả về một đối tượng với

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

1.

Example:

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

2

Bạn có thể ghi đè lên các kích thước mặc định cho thẻ HTML4 cũ

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

3 bằng cách sử dụng

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

2. Nó phải là một mảng có 7 giá trị (xem bên dưới).

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

5

Bằng cách vượt qua

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

5 với

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
 
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

8, thì chương trình sẽ cố gắng xác định

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

8 và

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

9 cho các bảng, dựa trên các thuộc tính CSS

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

0 và

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

1 đã được cung cấp cho

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

2 hoặc

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

3.

Example:

var html = htmlToPdfmake(`                        

height:100px / width:250px
height:100px / width:'auto'


Here it will use 250px for the width because we have to use the largest col's width
height:200px / width:'auto'

`, {
  tableAutoSize:true
});

// it will return something like:
[ {
    "table": {
      "body": [ [ … ] ],
      "widths": [ 188, "auto" ],
      "heights": [ 75, 151 ]
    }
} ]

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

4

Bằng cách chuyển

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

4 dưới dạng hàm với hai tham số (

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

6 và

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

7), bạn có thể sửa đổi văn bản của tất cả các nút trong tài liệu HTML của bạn.

Example:

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

8

Nếu mã HTML của bạn không sử dụng thẻ HTML thông thường, thì bạn có thể sử dụng

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

8 để xác định kết quả của riêng bạn.

Ví dụ với Trình tạo mã QR:

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

Thẻ HTML được hỗ trợ

Các thẻ HTML dưới đây được hỗ trợ:

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

0 (với các liên kết bên ngoài và bên trong)

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

1 /

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

2 /

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

3

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

4 /

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

5

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

6 /

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

7

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

8

var ret = htmlToPdfmake(``, {
  imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

var dd = {
  content:ret.content,
  images:ret.images
}
pdfMake.createPdf(dd).download();

9 /

var html = htmlToPdfmake(`                        

height:100px / width:250px
height:100px / width:'auto'


Here it will use 250px for the width because we have to use the largest col's width
height:200px / width:'auto'

`, {
  tableAutoSize:true
});

// it will return something like:
[ {
    "table": {
      "body": [ [ … ] ],
      "widths": [ 188, "auto" ],
      "heights": [ 75, 151 ]
    }
} ]

0 /

var html = htmlToPdfmake(`                        

height:100px / width:250px
height:100px / width:'auto'


Here it will use 250px for the width because we have to use the largest col's width
height:200px / width:'auto'

`, {
  tableAutoSize:true
});

// it will return something like:
[ {
    "table": {
      "body": [ [ … ] ],
      "widths": [ 188, "auto" ],
      "heights": [ 75, 151 ]
    }
} ]

1

var html = htmlToPdfmake(`                        

height:100px / width:250px
height:100px / width:'auto'


Here it will use 250px for the width because we have to use the largest col's width
height:200px / width:'auto'

`, {
  tableAutoSize:true
});

// it will return something like:
[ {
    "table": {
      "body": [ [ … ] ],
      "widths": [ 188, "auto" ],
      "heights": [ 75, 151 ]
    }
} ]

2 /

var html = htmlToPdfmake(`                        

height:100px / width:250px
height:100px / width:'auto'


Here it will use 250px for the width because we have to use the largest col's width
height:200px / width:'auto'

`, {
  tableAutoSize:true
});

// it will return something like:
[ {
    "table": {
      "body": [ [ … ] ],
      "widths": [ 188, "auto" ],
      "heights": [ 75, 151 ]
    }
} ]

3 /

var html = htmlToPdfmake(`                        

height:100px / width:250px
height:100px / width:'auto'


Here it will use 250px for the width because we have to use the largest col's width
height:200px / width:'auto'

`, {
  tableAutoSize:true
});

// it will return something like:
[ {
    "table": {
      "body": [ [ … ] ],
      "widths": [ 188, "auto" ],
      "heights": [ 75, 151 ]
    }
} ]

4 /

var html = htmlToPdfmake(`                        

height:100px / width:250px
height:100px / width:'auto'


Here it will use 250px for the width because we have to use the largest col's width
height:200px / width:'auto'

`, {
  tableAutoSize:true
});

// it will return something like:
[ {
    "table": {
      "body": [ [ … ] ],
      "widths": [ 188, "auto" ],
      "heights": [ 75, 151 ]
    }
} ]

5 /

var html = htmlToPdfmake(`                        

height:100px / width:250px
height:100px / width:'auto'


Here it will use 250px for the width because we have to use the largest col's width
height:200px / width:'auto'

`, {
  tableAutoSize:true
});

// it will return something like:
[ {
    "table": {
      "body": [ [ … ] ],
      "widths": [ 188, "auto" ],
      "heights": [ 75, 151 ]
    }
} ]

6 /

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

2 /

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

3

var html = htmlToPdfmake(`                        

height:100px / width:250px
height:100px / width:'auto'


Here it will use 250px for the width because we have to use the largest col's width
height:200px / width:'auto'

`, {
  tableAutoSize:true
});

// it will return something like:
[ {
    "table": {
      "body": [ [ … ] ],
      "widths": [ 188, "auto" ],
      "heights": [ 75, 151 ]
    }
} ]

9 đến

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

0

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

1

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

2

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

3

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

4 /

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

5

Thuộc tính CSS được hỗ trợ

CSS có thể tạo ra thiết kế rất phức tạp, tuy nhiên khung này chỉ có thể xử lý HTML / CSS đơn giản nhất. Sự hỗ trợ của phong cách CSS bị hạn chế và có thể không hoạt động trong mọi trường hợp với tất cả các giá trị:

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

6

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

7

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

8

var html = htmlToPdfmake(`Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
`, {
  replaceText:function(text, nodes) {
    // 'nodes' contains all the parent nodes for the text
    return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
  }
});

9

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

0 (với

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

1)

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

2 (với

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

3)

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

1

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

5

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

6

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

7

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

8

var html = htmlToPdfMake(`texto in code`, {,
  customTag:function(params) {
    var ret = params.ret;
    var element = params.element;
    var parents = params.parents;
    switch(ret.nodeName) {
      case "CODE": {
        ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
        ret.qr = ret.text[0].text;
        switch(element.getAttribute("typecode")){
          case 'QR':
            delete ret.text;
            ret.nodeName='QR';
            if(!ret.style || !Array.isArray(ret.style)){
              ret.style = [];
            }
            ret.style.push('html-qr');
            break;
        }
        break;
      }
    }
    return ret;
  }
});

9 (với

{
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h2: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5},
    li: {marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  }

0 và

{
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h2: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5},
    li: {marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  }

1)

>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my exampletitle>
  
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'>script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'>script>
  
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
head>
<body>
  […]
  <script>
    var val = htmlToPdfmake("your html code here");
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  script>
body>
html>

0

Kiểu mặc định

Tôi đã xác định một số kiểu mặc định cho phần tử được hỗ trợ.

Ví dụ: sử dụng một sẽ hiển thị từ in đậm. Hoặc, một liên kết sẽ xuất hiện trong màu xanh với một gạch chân, v.v.bold. Or, a link will appear in blue with an underline, and so on...

Dưới đây là danh sách các kiểu mặc định:

{
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h2: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5},
    li: {marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  }

Đối với thẻ HTML4 cũ

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

3, các thuộc tính

{
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h2: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5},
    li: {marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  }

4 có thể có giá trị từ 1 thành 7, sẽ được chuyển đổi thành 10pt, 14pt, 16pt, 18pt, 20pt, 24pt hoặc 28pt.

Xin lưu ý rằng các kiểu mặc định ở trên mạnh hơn các kiểu được xác định trong các lớp kiểu. Đọc dưới đây làm thế nào để ghi đè chúng. Read below how to overwrite them.

Tùy chỉnh phong cách

Mỗi phần tử được chuyển đổi sẽ có một lớp kiểu liên kết gọi là

{
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h2: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5},
    li: {marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  }

5.

Ví dụ: nếu bạn muốn tất cả các thẻ được tô sáng bằng backgroud màu vàng, bạn có thể sử dụng

{
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h2: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5},
    li: {marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  }

6 trong định nghĩa

{
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h2: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5},
    li: {marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  }

7:

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

0

Lớp CSS và phong cách

{
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h2: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5},
    li: {marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  }

8 và

{
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h2: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5},
    li: {marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  }

7 cho các yếu tố cũng sẽ được thêm vào.

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

1

Xin lưu ý rằng các kiểu mặc định mạnh hơn các kiểu được xác định trong các lớp kiểu. Ví dụ: nếu bạn xác định lớp

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

00 để thay đổi tất cả các liên kết bằng màu tím, thì nó sẽ không hoạt động vì các kiểu mặc định sẽ ghi đè lên nó: For example, if you define a class

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

00 to change all links in purple, then it won't work because the default styles will overwrite it:

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

2

Để làm cho nó hoạt động, bạn phải xóa các kiểu mặc định hoặc thay đổi nó bằng một giá trị mới. Bắt đầu

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

01, một tham số tùy chọn có sẵn dưới dạng tham số thứ hai.

Ví dụ: Bạn muốn

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

02 không có lề trái và

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

03 là 'tím' và không có kiểu 'gạch chân':

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

3

Các đơn vị

PDFMake sử dụng các đơn vị

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

04 cho các số.

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
 
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

7 sẽ kiểm tra kiểu nội tuyến để xem một số có đơn vị có được cung cấp không, sau đó nó sẽ chuyển đổi nó thành

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

04.

Nó chỉ hoạt động cho

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

07,

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

04,

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

09 và

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

10 (đối với ________ 109/________ 110 Nó dựa trên

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

13);

Examples:

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

14 sẽ được chuyển đổi thành

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

15

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

16 sẽ được chuyển đổi thành

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

17

var htmlToPdfmake = require("html-to-pdfmake"); // or: // import htmlToPdfmake from "html-to-pdfmake"18

Nếu bạn sử dụng

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
 
`);
/*
it will return:
{
 stack:[
 {
 text: 'My title',
 fontSize: 24,
 bold: true,
 marginBottom: 5,
 style: ['html-h2']
 },
 {
 text: [
 {
 text: 'This is a sentence with a '
 },
 {
 text: 'bold word',
 bold: true,
 style: ['html-strong']
 },
 {
 text: ', '
 },
 {
 text: 'one in italic',
 italics: true,
 style: ['html-em']
 },
 {
 text: ', and '
 },
 {
 text: 'one with underline',
 decoration: 'underline',
 style: ['html-u']
 },
 {
 text: '. And finally '
 },
 {
 text: 'a link',
 color: 'blue',
 decoration: 'underline',
 link: 'https://www.somewhere.com',
 style: ['html-a']
 },
 {
 text: '.'
 }
 ],
 margin: [0, 5, 0, 10],
 style: ['html-p']
 }
 ],
 style: ['html-div']
}
 */

7 trong trình duyệt web, thì bạn chỉ có thể chuyển tùy chọn

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);

/*
it will return:
{
  stack:[
    {
      text: 'My title',
      fontSize: 24,
      bold: true,
      marginBottom: 5,
      style: ['html-h2']
    },
    {
      text: [
        {
          text: 'This is a sentence with a '
        },
        {
          text: 'bold word',
          bold: true,
          style: ['html-strong']
        },
        {
          text: ', '
        },
        {
          text: 'one in italic',
          italics: true,
          style: ['html-em']
        },
        {
          text: ', and '
        },
        {
          text: 'one with underline',
          decoration: 'underline',
          style: ['html-u']
        },
        {
          text: '. And finally '
        },
        {
          text: 'a link',
          color: 'blue',
          decoration: 'underline',
          link: 'https://www.somewhere.com',
          style: ['html-a']
        },
        {
          text: '.'
        }
      ],
      margin: [0, 5, 0, 10],
      style: ['html-p']
    }
  ],
  style: ['html-div']
}
 */

6 với giá trị

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);

/*
it will return:
{
  stack:[
    {
      text: 'My title',
      fontSize: 24,
      bold: true,
      marginBottom: 5,
      style: ['html-h2']
    },
    {
      text: [
        {
          text: 'This is a sentence with a '
        },
        {
          text: 'bold word',
          bold: true,
          style: ['html-strong']
        },
        {
          text: ', '
        },
        {
          text: 'one in italic',
          italics: true,
          style: ['html-em']
        },
        {
          text: ', and '
        },
        {
          text: 'one with underline',
          decoration: 'underline',
          style: ['html-u']
        },
        {
          text: '. And finally '
        },
        {
          text: 'a link',
          color: 'blue',
          decoration: 'underline',
          link: 'https://www.somewhere.com',
          style: ['html-a']
        },
        {
          text: '.'
        }
      ],
      margin: [0, 5, 0, 10],
      style: ['html-p']
    }
  ],
  style: ['html-div']
}
 */

8 và hình ảnh sẽ được truyền qua các tài liệu tham khảo (bắt đầu từ PDFMake v0.1.67).in a Web browser, then you could just pass the option

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);

/*
it will return:
{
  stack:[
    {
      text: 'My title',
      fontSize: 24,
      bold: true,
      marginBottom: 5,
      style: ['html-h2']
    },
    {
      text: [
        {
          text: 'This is a sentence with a '
        },
        {
          text: 'bold word',
          bold: true,
          style: ['html-strong']
        },
        {
          text: ', '
        },
        {
          text: 'one in italic',
          italics: true,
          style: ['html-em']
        },
        {
          text: ', and '
        },
        {
          text: 'one with underline',
          decoration: 'underline',
          style: ['html-u']
        },
        {
          text: '. And finally '
        },
        {
          text: 'a link',
          color: 'blue',
          decoration: 'underline',
          link: 'https://www.somewhere.com',
          style: ['html-a']
        },
        {
          text: '.'
        }
      ],
      margin: [0, 5, 0, 10],
      style: ['html-p']
    }
  ],
  style: ['html-div']
}
 */

6 with the value

var pdfMake = require("pdfmake/build/pdfmake");
var pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var htmlToPdfmake = require("html-to-pdfmake");

var html = htmlToPdfmake(`
  
    My title
    
      This is a sentence with a bold word, one in italic,
      and one with underline. And finally a link.
    
  
`);

/*
it will return:
{
  stack:[
    {
      text: 'My title',
      fontSize: 24,
      bold: true,
      marginBottom: 5,
      style: ['html-h2']
    },
    {
      text: [
        {
          text: 'This is a sentence with a '
        },
        {
          text: 'bold word',
          bold: true,
          style: ['html-strong']
        },
        {
          text: ', '
        },
        {
          text: 'one in italic',
          italics: true,
          style: ['html-em']
        },
        {
          text: ', and '
        },
        {
          text: 'one with underline',
          decoration: 'underline',
          style: ['html-u']
        },
        {
          text: '. And finally '
        },
        {
          text: 'a link',
          color: 'blue',
          decoration: 'underline',
          link: 'https://www.somewhere.com',
          style: ['html-a']
        },
        {
          text: '.'
        }
      ],
      margin: [0, 5, 0, 10],
      style: ['html-p']
    }
  ],
  style: ['html-div']
}
 */

8 and the images will be passed by references (starting from PDFMake v0.1.67).

Mặt khác, thuộc tính

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

22 phải là nội dung được mã hóa cơ sở64 (như được mô tả trong tài liệu PDFMake) hoặc tham chiếu (xem thêm ở đây).base64 encoded content (as describe in the PDFMake documentation) or a reference (see more here).

Bạn có thể kiểm tra câu hỏi Stackoverflow này để biết các cách khác nhau để có được nội dung được mã hóa Base64 từ một hình ảnh.

ngắt trang

Bạn có thể sử dụng lớp

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

23 và một lớp CSS mà bạn sẽ áp dụng cho các yếu tố của mình để xác định khi nào nên thêm một trang ngắt:

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

4

Xem ví dụ.js để xem một ví dụ khác.

Tính chất đặc biệt

PDFMake cung cấp một số thuộc tính đặc biệt, như

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

8 hoặc

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>

9 cho

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

26 hoặc

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

27 cho

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

28, v.v. Để áp dụng các thuộc tính đặc biệt này, bạn phải sử dụng thuộc tính

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

29 trên các phần tử HTML của mình, sau đó chuyển các thuộc tính đặc biệt dưới dạng chuỗi JSON.

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

5

Biểu thức được cung cấp bởi

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

29 phải là chuỗi JSON hợp lệ vì nó sẽ được dịch bằng

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

31.

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

32

Một

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

32 cũng có thể được tùy chỉnh bằng cách sử dụng

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

29. Một số kiểu mặc định được áp dụng cho yếu tố này:

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

6

Xem tệp estepress.js để xem ví dụ

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

32.

Sử dụng với nút

Để sử dụng nó trong tập lệnh nút, bạn cần cài đặt

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

36:

Sau đó, trong tệp JS của bạn:

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

7

Ví dụ

Bạn có thể tìm thấy nhiều ví dụ hơn trong ví dụ.js sẽ tạo ví dụ.pdf:

var htmlToPdfmake = require("html-to-pdfmake");
// or:
// import htmlToPdfmake from "html-to-pdfmake"

8

Quyên tặng

Bạn có thể hỗ trợ công việc của tôi bằng cách quyên góp, hoặc bằng cách truy cập trang Nhà tài trợ GitHub của tôi. Cảm ơn bạn!

programming html Pdfmake jsPDF Pageorientation pdfmake Html-to-text npm Pdfmake playground Pdfmake doc

Hướng dẫn how do i convert html to pdf from pdfmake? - làm cách nào để chuyển đổi html sang pdf từ pdfmake?

html-to-pdfmake

Bản demo trực tuyến

Cách sử dụng

Nút

My title

Trình duyệt

Tài liệu

Tùy chọn

My title

My title

My title

My title

My title

My title

My title

My title

My title

My title

My title

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>2

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>5

My title

Thẻ HTML được hỗ trợ

Thuộc tính CSS được hỗ trợ

Kiểu mặc định

Tùy chỉnh phong cách

Lớp CSS và phong cách

Các đơn vị

My title

var htmlToPdfmake = require("html-to-pdfmake"); // or: // import htmlToPdfmake from "html-to-pdfmake"18

My title

My title

My title

My title

My title

ngắt trang

Tính chất đặc biệt

var htmlToPdfmake = require("html-to-pdfmake"); // or: // import htmlToPdfmake from "html-to-pdfmake"32

Sử dụng với nút

Ví dụ

Quyên tặng

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
2

<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js">script>
5

var htmlToPdfmake = require("html-to-pdfmake"); // or: // import htmlToPdfmake from "html-to-pdfmake"
32