Multi-Column Layout for printing (Print Only)

Convert single column layout to multi-column layout only when printing

目前為 2024-11-05 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==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();
    }
})();