Multi-Column Layout for printing (Print Only)

Convert single column layout to multi-column layout only when printing
当前为 2024-11-05 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Multi-Column Layout for printing (Print Only)
// @namespace    http://tampermonkey.net/
// @license MIT
// @version      1.4
// @description  Convert single column layout to multi-column layout only when printing
// @author       KQ yang
// @match        file:///*
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

// ========================
// 配置区域 - 直接修改这里的值来调整打印布局
// ========================
const CONFIG = {
    columns: 2,            // 栏数：1-4
    columnGap: '30px',     // 栏间距
    fontSize: '16px',      // 默认字体大小
    paragraphSpacing: '1em', // 段落间距
    enablePageBreak: true,  // 是否允许分页打印，设为false则打印时保持连续
    lineHeight: '1.5',     // 行高
};

(function() {
    'use strict';

    // 创建样式 - 只包含打印相关样式
    const styleSheet = `
        /* 打印样式优化 */
        @media print {
            html, body {
                margin: 0 !important;
                padding: 0 !important;
                min-height: 0 !important;
                height: auto !important;
            }

            .print-column-container {
                column-count: ${CONFIG.columns} !important;
                column-gap: ${CONFIG.columnGap} !important;
                column-rule: 1px solid #ddd !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                min-height: 0 !important;
                height: auto !important;
                overflow: visible !important;
                box-sizing: border-box !important;
                font-size: ${CONFIG.fontSize} !important;
                line-height: ${CONFIG.lineHeight} !important;
                ${CONFIG.enablePageBreak ? '' : 'page-break-inside: avoid !important;'}
            }

            /* 确保内容不被截断 */
            .print-column-container > * {
                break-inside: avoid !important;
                margin-bottom: ${CONFIG.paragraphSpacing} !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                page-break-inside: avoid !important;
            }

            /* 确保图片在打印时不会超出页面 */
            .print-column-container img {
                max-width: 100% !important;
                height: auto !important;
                page-break-inside: avoid !important;
            }
        }
    `;

    // 添加样式到页面
    GM_addStyle(styleSheet);

    // 查找并应用样式到主要内容区域
    function applyPrintColumns() {
        const mainContent = document.querySelector('.target-content') || document.body;
        mainContent.classList.add('print-column-container');

        // 添加打印优化
        const printStyle = document.createElement('style');
        printStyle.media = 'print';
        printStyle.textContent = `
            @page {
                margin: 1cm !important;
                padding: 0 !important;
                size: auto !important;
            }
        `;
        document.head.appendChild(printStyle);
    }

    // 在页面加载完成后应用样式
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', applyPrintColumns);
    } else {
        applyPrintColumns();
    }
})();
欢迎访问Greasy Fork镜像
