时间戳

首页 > 解决方案 > 使输入文本背景可打印为 PDF

javascript - 使输入文本背景可打印为 PDF

问题描述

当我将页面保存为 PDF 时，我正在寻找一种方法来打印输入文本背景图像（右键单击，“打印...”选项和“另存为 PDF”）。

该页面有一个正方形背景图像，以模拟每个字符都被键入到一个正方形中。

这是一段代码来说明我的意思：

#text
    {
    background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");     
    width: 213px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 12px;
    }
Name: <input type="text" size="10" maxlength="10" id="text"/>

任何简单地“启用”要打印的部分的建议，或任何其他提供相同灵活性的连续键入、突出显示和删除文本的解决方案，将不胜感激。

标签： javascripthtmlcss

解决方案

You can do it using the 'color-adjust' CSS property and may specify different settings for '@media print' CSS at-rule while printing.

Following code is the simplest using only color-adjust respective -webkit-print-color-adjust:

#text {
    background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");        
    width: 213px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 12px;
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}
Name: <input type="text" size="10" maxlength="10" id="text">

Tested on FireFox 85.

This answer was inspired by thread How can I force browsers to print background images in CSS? discussing cons and pros of background-image printing.

推荐阅读