JavaScript 实现导出内容自动居中：从原理到实践

news2025/3/21 3:42:01

引言

在前端开发中，我们经常会遇到需要将页面上的内容导出为文件（如 PDF、Excel 等）的需求。而在导出的内容中，让元素自动居中显示可以提升内容的美观度和专业性。本文将围绕 JavaScript 实现导出内容自动居中展开，详细介绍实现的原理、不同导出场景下的具体实现方法以及一些注意事项。

实现原理

要实现导出内容自动居中，核心思路是在导出前对内容进行布局调整，确保元素在页面或容器中处于居中位置。通常可以通过 CSS 样式来实现水平和垂直居中，常见的方法有使用 flexbox、grid 布局或者绝对定位结合 transform 属性。在导出时，需要确保这些居中样式能够正确应用到导出的文件中。

不同导出场景下的实现方法

导出为 PDF

当导出为 PDF 时，我们可以使用 jsPDF 库。jsPDF 是一个流行的用于生成 PDF 文件的 JavaScript 库，结合 html2canvas 可以将 HTML 元素转换为图像并添加到 PDF 中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导出为 PDF 并自动居中</title>
    <style>
        #content {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>

<body>
    <div id="content">
        <p>这是要导出的内容</p>
    </div>
    <button id="exportButton">导出为 PDF</button>

    <script>
        const exportButton = document.getElementById('exportButton');
        const content = document.getElementById('content');

        exportButton.addEventListener('click', async () => {
            const canvas = await html2canvas(content);
            const imgData = canvas.toDataURL('image/png');

            const pdf = new jspdf.jsPDF();
            const imgWidth = pdf.internal.pageSize.getWidth();
            const imgHeight = (canvas.height * imgWidth) / canvas.width;

            // 计算垂直居中的位置
            const y = (pdf.internal.pageSize.getHeight() - imgHeight) / 2;

            pdf.addImage(imgData, 'PNG', 0, y, imgWidth, imgHeight);
            pdf.save('exported_content.pdf');
        });
    </script>
</body>

</html>

代码解释

CSS 样式：使用 flexbox 布局将 #content 元素内的内容水平和垂直居中。
导出逻辑：
- 使用 html2canvas 将 #content 元素转换为 canvas 图像。
- 使用 jsPDF 创建一个新的 PDF 文件。
- 计算图像的宽度和高度，并根据页面大小计算垂直居中的位置。
- 将图像添加到 PDF 中，并保存为文件。

导出为 Excel

当导出为 Excel 时，我们可以使用 xlsx 库。xlsx 可以将数据转换为 Excel 文件。为了实现居中效果，我们可以在导出前设置单元格的样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导出为 Excel 并自动居中</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</head>

<body>
    <button id="exportExcelButton">导出为 Excel</button>

    <script>
        const exportExcelButton = document.getElementById('exportExcelButton');

        exportExcelButton.addEventListener('click', () => {
            const data = [
                ['这是要导出的内容']
            ];

            const ws = XLSX.utils.aoa_to_sheet(data);

            // 设置单元格样式为居中
            const cell = ws['A1'];
            cell.s = {
                alignment: {
                    horizontal: 'center',
                    vertical: 'center'
                }
            };

            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            XLSX.writeFile(wb, 'exported_content.xlsx');
        });
    </script>
</body>

</html>

代码解释

数据准备：创建一个二维数组 data 作为要导出的数据。
样式设置：使用 XLSX.utils.aoa_to_sheet 将数据转换为工作表对象 ws，然后设置单元格 A1 的样式为水平和垂直居中。
导出文件：使用 XLSX.utils.book_new 创建一个新的工作簿，将工作表添加到工作簿中，并使用 XLSX.writeFile 保存为 Excel 文件。