纯js实现html转pdf的简单实例(推荐)

2023年5月27日上午9:28 • JavaScript

要实现将HTML转换成PDF文件，可以使用第三方库jsPDF，该库内置了HTML的转PDF的功能。下面是一个纯JS实现HTML转PDF的简单实例的完整攻略：

步骤一：准备工作

首先，需要引入 jsPDF 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

步骤二：准备需要转换的HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>HTML to PDF example</title>
</head>
<body>
    <h1>This is a sample HTML document</h1>
    <p>You can put your HTML code here.</p>
</body>
</html>

步骤三：编写JavaScript代码

// 获取需要转换成PDF的HTML代码
const element = document.getElementById('html2pdf');

// 创建jsPDF实例
const pdf = new jspdf('p', 'pt', 'a4');

// 将HTML转换成PDF
pdf.html(element, {
    callback: function () {
        // 保存PDF文件
        pdf.save('html2pdf.pdf');
    }
});

上面的 JavaScript 代码中，使用了HTMLElement 的 innerHTML 属性来获取需要转换成 PDF 的 HTML 代码，并创建了一个 jsPDF 实例，然后将 HTML 代码转换成 PDF，最后将生成的 PDF 文件保存到本地。

示例一：添加样式处理

如果需要在生成的 PDF 文件中保留 CSS 样式，可以在调用 html 方法时，额外传入一个包含 CSS 样式的对象参数。

const pdf = new jspdf();    

const html = document.querySelector('#html-content')

pdf.html(html, {
    callback: function () {
        pdf.save("html-to-pdf.pdf");
    },
    x: 10,
    y: 10,
    html2canvas: {
        scale: 2
    },
    jsPDF: {
        unit: "in",
        format: "letter",
        orientation: 'portrait'
    },
    callback: function (pdf) {
        var fileName = 'html-to-pdf.pdf';
        pdf.save(fileName);
    },
    margin: [72, 0],
    filename: 'html-to-pdf.pdf',
    image: {
        type: 'jpeg',
        quality: 0.98,
    },
    html2canvas: {
        dpi: 192,
        letterRendering: true,
        useCORS: true,
        scale: 1,
        id: "pdf1"
    },
    jsPDF: {
        unit: 'pt',
        format: 'letter',
        orientation: 'portrait'
    },
    bodyStyles: {
        fontSize: 10,
        lineHeight: 2
    },
    pageStyles: {
        backgroundColor: '#FFFFFF',
        padding: '40px',
        fontSize: '10pt'
    },
    fonts: {
        Roboto: {
            normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
            bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
            italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
            bolditalics:'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
        }
    }
});

示例二：包含图片转换

如果需要将 HTML 中包含的图片一并转换为 PDF 文件，可以使用 HTML2Canvas 库来实现。HTML2Canvas 是一款负责将 HTML 元素转换为 Canvas 元素的 JavaScript 库，可以把网页中任意 HTML 元素（包括 Canvas）渲染成图像。具体代码如下：

const pdf = new jspdf();    

const html = document.querySelector('#html-content')

html2canvas(html).then(canvas => {
   const imgData = canvas.toDataURL('image/png');
   const imgProps = pdf.getImageProperties(imgData);
   const pdfWidth = pdf.internal.pageSize.getWidth();
   const pdfHeight = pdfWidth * (imgProps.height / imgProps.width);
   pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
   pdf.save('html-to-pdf.pdf');
});

在这个示例中，通过调用 HTML2Canvas 的方法将 HTML 元素转换成 Canvas 元素，并将生成的 Canvas 元素转换成图像数据，通过 jspdf 实现将图像数据转换成 PDF 文件。

在实际应用中，我们可以将这两个示例结合起来，实现 HTML 元素转换成 PDF，并保留 CSS 样式和图片。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯js实现html转pdf的简单实例(推荐) - Python技术站