1天精通wkhtmltopdf-基础知识

2023-10-10 09:50
文章标签 精通 html frontend 基础知识 wk topdf

本文主要是介绍1天精通wkhtmltopdf-基础知识，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

wkhtmltopdf教程

简介

wkhtmltopdf和wkhtmltoimage是开源(LGPLv3)命令行工具,通过命令行交互、开源免费的将html内容转为pdf或图片的工具,其本质是使用内置浏览器内核渲染目标网页，然后再将网页渲染结果转换为PDF文档或图片。

官方地址为：https://wkhtmltopdf.org/index.html

在这里插入图片描述

安装

官网下载地址为：https://wkhtmltopdf.org/downloads.html

github地址：https://github.com/wkhtmltopdf/wkhtmltopdf/releases

linux安装

  1. 安装依赖

    yum install -y fontconfig libX11 libXext libXrender libjpeg libpng xorg-x11-fonts-75dpi xorg-x11-fonts-Type1

  2. 将下载好的安装包上传的服务器

  3. 安装

    rpm -ivh wkhtmltox-0.12.6-1.centos7.x86_64.rpm

  4. 验证服务是否安装成功

    wkhtmltopdf https://www.baidu.com/ /tmp/test.pdf

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wfhSfvyQ-1651797211477)(D:\笔记\笔记\wkhtmltox\中文乱码.png)]

  1. 乱码解决

    出现乱码是因为缺少对应的字体，这时候就需要安装对应的字体，这里我准备了一些字体，解压到/usr/share/fonts/路径下

    unzip -o  /usr/share/fonts/fonts.zip -d /usr/share/fonts
wkhtmltopdf https://www.baidu.com/ /tmp/test.pdf

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3nXL9r6-1651797211479)(D:\笔记\笔记\wkhtmltox\中文乱码解决完成.png)]

windows安装

下载exe文件直接安装就可以使用，如果也出现乱码则下载对应的字体到C:\Windows\Fonts路径下

命令解析

原英文文档地址：https://wkhtmltopdf.org/usage/wkhtmltopdf.txt

语法结构

wkhtmltopdf [GLOBAL OPTION]... [OBJECT]... <output file>
- wkhtmltopdf:生成pdf的执行命令
- GLOBAL OPTION：全局选项
- OBJECT：要生成pdf的原内容
- output file：pdf输出路径

文档对象简介

wkhtmltopdf 能够把多个“对象”合并生成一个pdf文档，这些“对象”可以是“页面对象”、“封面对象”、或是“目录对象”。这些对象在pdf文档中的顺序可以通过命令行参数来指定。命令行参数包括两部分，一种是针对某一特定“对象”的命令行参数，另一种是全局的命令行参数。并且全局的命令行参数只能放在全局参数区([GLOBAL OPTION])中指定。

页面对象简介

“页面对象”作用是用来把一个网页作为内容输出到PDF文档中。

(page)? <input url/file name> [PAGE OPTION]...

“页面对象”的参数可以放在“全局参数域([GLOBAL OPTIONS])”和“页面参数域([PAGE OPTIONS])”。程序会根据实际情况在所有参数中找到合适的参数应用到页面、页眉和页脚。

封面对象简介

“封面对象”用来把一个网页作为封面输出到PDF文档中，输出的页面不会在TOC中出现，并且不会包含页眉和页脚。

cover <input url/file name> [PAGE OPTION]...

所有能够在“页面对象”中使用的参数都可以用到“封面对象”

目录对象简介

“目录对象”的作用是输出一个目录到PDF文件中。

toc [TOC OPTION]...

所有能够在“页面对象”中使用的参数都可以用到“TOC对象”，并且还有许多的针对“TOC对象”的参数可以应用到“TOC对象”中。目录是通过 XSLT 生成的，这就意味着它可以被定义成任何你想看到的样子。你可以通过命令行参数 --dump-default-toc-xsl 输出默认的 XSLT 文档，通过 --dump-outline 命令行参数 可指定以XML格式输出当前处理文档的目录到指定文件。

命令参数

命令参数包含五部分，分别是Global Options(全局参数)，Outline Options(大纲参数选项)，Page Options(页面对象参数)，**Headers And Footer Options(页眉和页脚参数选项)和TOC Options(目录对象参数)**六部分。

Global Options(全局参数)
重要程度命令英文解析中文解析示例
重要-H, --extended-helpDisplay more extensive help, detailing less common command switches显示最详细的说明文档wkhtmltopdf -H
重要-h, --helpDisplay help简洁的帮助文档wkhtmltopdf -h
重要–htmldocOutput program html help输出程序的html帮助文档wkhtmltopdf --htmldoc
重要–page-height Page height页面高度（参数的值得单位默认是mm）wkhtmltopdf --page-width 110 --page-height 110 https://www.baidu.com/ /tmp/test.pdf
重要-s, --page-size Set paper size to: 1·, Letter, etc. (default A4)页面的尺寸，如：A4,Letter等，默认是：A4，详见【打印纸张尺寸】wkhtmltopdf -s A4 https://www.baidu.com/ /tmp/test.pdf
重要–page-width Page width页面宽度（参数的值得单位默认是mm）
重要-O, --orientation Set orientation to Landscape or Portrait (default Portrait)将方向设置为横向或纵向（默认纵向）wkhtmltopdf -O Landscape https://www.baidu.com/ /tmp/test.pdf
重要-B, --margin-bottom Set the page bottom margin设置页面的下边距wkhtmltopdf -B 10 https://www.baidu.com/ /tmp/test.pdf
重要-L, --margin-left Set the page left margin (default 10mm)设置页面的左边距(默认10mm)wkhtmltopdf -L 10 https://www.baidu.com/ /tmp/test.pdf
重要-R, --margin-right Set the page right margin (default 10mm)设置页面的右边距(默认10mm)wkhtmltopdf -R 10 https://www.baidu.com/ /tmp/test.pdf
重要-T, --margin-top Set the page top margin设置页面的上边距wkhtmltopdf -T 10 https://www.baidu.com/ /tmp/test.pdf
重要–image-dpi When embedding images scale them down to this dpi (default 600)嵌入图像时，将其缩小到指定的dpi（默认为600）wkhtmltopdf --image-dpi 600 https://www.baidu.com/ /tmp/test.pdf
重要–image-quality When jpeg compressing images use this quality (default 94)压缩图像时使用此质量（默认值94）wkhtmltopdf --image-quality 94 https://www.baidu.com/ /tmp/test.pdf
重要-l, --lowqualityGenerates lower quality pdf/ps. Useful to shrink the result document space生成较低质量的pdf/ps。有助于缩小结果文档空间（经验证小文档用处不大）wkhtmltopdf -l https://www.baidu.com/ /tmp/test.pdf
重要–no-pdf-compressionDo not use lossless compression on pdf objects不要对pdf对象使用无损压缩
–collateCollate when printing multiple copies (default)当输出多个副本时校验(默认)
–no-collateDo not collate when printing multiple copies当输出多个副本时不校验
–cookie-jar Read and write cookies from and to the supplied cookie jar file从提供的cookie架包文 件读取和写入cookie
–copies Number of copies to print into the pdf file (default 1)设置生成该文件的数量（默认1）wkhtmltopdf --copies 3 https://www.baidu.com/ /tmp/test.pdf
-d, --dpi Change the dpi explicitly (this has no effect on X11 based systems) (default 96)改变分辨率（对于x11系统没有影响）
-g, --grayscalePDF will be generated in graysca灰色生成pdfwkhtmltopdf -g https://www.baidu.com/ /tmp/test.pdf
–log-level Set log level to: none, error, warn or info (default info)设置日志级别：none, error, warn or info (默认 info)wkhtmltopdf --log-level info https://www.baidu.com/ /tmp/test.pdf
-q, --quietBe less verbose, maintained for backwards compatibility; Same as using --log-level none静态模式，不在标准输出中打印任何信息
–read-args-from-stdinRead command line arguments from stdin从标准输入中读取命令行参数
–readmeOutput program readme输出程序的 readme 文档
–title The title of the generated pdf file (The title of the first document is used if not specified)生成的PDF文档的标题，如果不指定则使用第一个文档的标题
–use-xserverUse the X server (some plugins and other stuff might not work without X11)使用X服务器（一些插件和其他的东西没有X11可能无法正常工作）
-V, --versionOutput version information and exit输出版本信息
–licenseOutput license information and exit输出授权信息并退出
–manpageOutput program man page输出代码管理者的名称

打印纸张尺寸

默认的页面尺寸是 A4，你可以使用 --page-size 参数指定你想要的页面尺寸，如：A3，Letter 和 Legal等。想要查看本程序支持的所有页面尺寸，请访问 http://qt-project.org/doc/qt-4.8/qprinter.html#PaperSize-enum

ConstantValueDescription
QPrinter::A05841 x 1189 mm
QPrinter::A16594 x 841 mm
QPrinter::A27420 x 594 mm
QPrinter::A38297 x 420 mm
QPrinter::A40210 x 297 mm, 8.26 x 11.69 inches
QPrinter::A59148 x 210 mm
QPrinter::A610105 x 148 mm
QPrinter::A71174 x 105 mm
QPrinter::A81252 x 74 mm
QPrinter::A91337 x 52 mm
QPrinter::B0141000 x 1414 mm
QPrinter::B115707 x 1000 mm
QPrinter::B217500 x 707 mm
QPrinter::B318353 x 500 mm
QPrinter::B419250 x 353 mm
QPrinter::B51176 x 250 mm, 6.93 x 9.84 inches
QPrinter::B620125 x 176 mm
QPrinter::B72188 x 125 mm
QPrinter::B82262 x 88 mm
QPrinter::B92333 x 62 mm
QPrinter::B101631 x 44 mm
QPrinter::C5E24163 x 229 mm
QPrinter::Comm10E25105 x 241 mm, U.S. Common 10 Envelope
QPrinter::DLE26110 x 220 mm
QPrinter::Executive47.5 x 10 inches, 190.5 x 254 mm
QPrinter::Folio27210 x 330 mm
QPrinter::Ledger28431.8 x 279.4 mm
QPrinter::Legal38.5 x 14 inches, 215.9 x 355.6 mm
QPrinter::Letter28.5 x 11 inches, 215.9 x 279.4 mm
QPrinter::Tabloid29279.4 x 431.8 mm
QPrinter::Custom30Unknown, or a user defined size.
Outline Options(大纲参数选项)
命令英文解析中文解析
–dump-default-toc-xslDump the default TOC xsl style sheet to stdout输出默认的 TOC xsl 样式表到标准输出
–dump-outline Dump the outline to a file将大纲转储到文件中
–outlinePut an outline into the pdf (default)将大纲放入pdf（默认）
–no-outlineDo not put an outline into the pdf不要在pdf中输入大纲
–outline-depth Set the depth of the outline (default 4)设置大纲的深度（默认值4）
Page Options(页面对象参数)
重要程度命令英文解析中文解析示例
重要–disable-smart-shrinkingDisable the intelligent shrinking strategy used by WebKit that makes the pixel/dpi ratio non-constant禁止智能收缩策略wkhtmltopdf --disable-smart-shrinking https://www.baidu.com/ /tmp/test.pdf
重要–enable-smart-shrinkingEnable the intelligent shrinking strategy used by WebKit that makes the pixel/dpi ratio non-constant (default)开启智能收缩策略(默认)wkhtmltopdf --enable-smart-shrinking https://www.baidu.com/ /tmp/test.pdf
–allow Allow the file or files from the specified folder to be loaded (repeatable)指定加载HTML中相对路径文件的目录（可重复使用）
–backgroundDo print background (default)输出页面背景（默认）
–no-backgroundDo not print background不输出页面背景
–bypass-proxy-for Bypass proxy for host (repeatable)绕过主机代理（可重复）
–cache-dir Web cache directory网页的缓存目录
–checkbox-checked-svg Use this SVG file when rendering checked checkboxes使用指定的SVG文件渲染选中的复选框
–checkbox-svg Use this SVG file when rendering unchecked checkboxes使用指定的SVG文件渲染未选中的筛选框
–cookie Set an additional cookie (repeatable), value should be url encoded.设置访问网页时的cookie,value 需要进行url编码（可重复）
–custom-header Set an additional HTTP header (repeatable)设置访问网页时的HTTP头（可重复）
–custom-header-propagationAdd HTTP headers specified by --custom-header for each resource request.为每个要加载的资源添加由 --custom-header 指定的HTTP头
–no-custom-header-propagationDo not add HTTP headers specified by --custom-header for each resource request.不为每个要加载的资源添加由 --custom-header 指定的HTTP头
–debug-javascriptShow javascript debugging output显示javascript调试输出的信息
–no-debug-javascriptDo not show javascript debugging output (default)不显示javascript调试输出的信息（默认）
–default-headerAdd a default header, with the name of the page to the left, and the page number to the right, this is short for:
–header-left=‘[webpage]’
–header-right=‘[page]/[toPage]’ --top 2cm
–header-line		添加一个默认的“头”，在页面的左头显示页面的名字， 在页面的右头显示页码，这相对于进行了如下设置： --header-left=‘[webpage]’ --header-right=‘[page]/[toPage]’ --top 2cm --header-line
–encoding Set the default text encoding, for input为输入的文本设置默认的编码方式
–disable-external-linksDo not make links to remote web pages禁止页面中的外链生成超链接
–enable-external-linksMake links to remote web pages (default)允许页面中的外链生成超链接（默认）
–disable-formsDo not turn HTML form fields into pdf form fields (default)不要将HTML表单字段转换为pdf表单字段（默认）
–enable-formsTurn HTML form fields into pdf form fields将HTML表单字段转换为pdf表单字段
–imagesDo load or print images (default)加载图片并输出到PDF文档（默认）
–no-imagesDo not load or print imagespdf文档中不加载图片
–disable-internal-linksDo not make local links禁止内部链接
–enable-internal-linksMake local links (default)开启内部链接（默认）
-n, --disable-javascriptDo not allow web pages to run javascript禁止javascript执行
–enable-javascriptDo allow web pages to run javascript (default)允许javascript执行（默认）
–javascript-delay Wait some milliseconds for javascript finish (default 200)延迟执行javascript执行
–keep-relative-linksKeep relative external links as relative external links将相对外部链接保持为相对外部链接
–load-error-handling Specify how to handle pages that fail to load: abort, ignore or skip (default abort)指定如何处理未能加载的页面：中止、忽略或跳过（默认中止）
–load-media-error-handling Specify how to handle media files that fail to load: abort, ignore or skip (default ignore)指定当媒体文件加载失败后的动作，可以指定为：中止、忽略或跳过（默认忽略）
–disable-local-file-accessDo not allowed conversion of a local file to read in other local files, unless explicitly allowed with --allow (default)不允许本地文件加载其他本地文件，使用命令行参数 --allow 指定的目录除外。
–enable-local-file-accessAllowed conversion of a local file to read in other local files.允许本地文件加载其他的本地文件(这是默认设置)
–minimum-font-size Minimum font size最小字号
–exclude-from-outlineDo not include the page in the table of contents and outlines排除该页包含在目录和大纲中
–include-in-outlineInclude the page in the table of contents and outlines (default)加载当前页面到PDF文档的目录和大纲中(默认)
–page-offset Set the starting page number (default 0)设置页码的起始值(默认值为0)
–password HTTP Authentication passwordHTTP身份认证的密码
–disable-pluginsDisable installed plugins (default)禁止使用插件(默认)
–enable-pluginsEnable installed plugins (plugins will likely not work)允许使用插件，但插件可能并不工作
–post Add an additional post field (repeatable)添加一个post字段（可重复）
–post-file Post an additional file (repeatable)添加一个POST文件（可重复）
–print-media-typeUse print media-type instead of screen用显示媒体类型代替屏幕
–no-print-media-typeDo not use print media-type instead of screen (default)不用显示媒体类型代替屏幕（默认）
-p, --proxy Use a proxy使用代理
–proxy-hostname-lookupUse the proxy for resolving hostnames使用代理解析主机名
–radiobutton-checked-svg Use this SVG file when rendering checked radiobuttons使用指定的SVG文件渲染选中的单选框
–radiobutton-svg Use this SVG file when rendering unchecked radiobuttons使用指定的SVG文件渲染未选中的单选框
–resolve-relative-linksResolve relative external links into absolute links (default)将相对外部链接解析为绝对链接（默认）
–run-script Run this additional javascript after the page is done loading (repeatable)页面加载完成后执行一个附加的JS文件（可重复）
–ssl-crt-path Path to the ssl client cert public key in OpenSSL PEM format, optionally followed by intermediate ca and trusted certsOpenSSL PEM格式的ssl客户端证书公钥的路径，可选地后跟中间ca和受信任证书
–ssl-key-password Password to ssl client cert private keyssl客户端证书私钥的密码
–ssl-key-path Path to ssl client cert private key in OpenSSL PEM formatOpenSSL PEM格式的ssl客户端证书私钥路径
–stop-slow-scriptsStop slow running javascripts (default)停止运行缓慢的javascript代码（默认）
–no-stop-slow-scriptsDo not Stop slow running javascripts不停止运行缓慢的javascript代码
–disable-toc-back-linksDo not link from section header to toc(default)禁止从标题链接到目录(默认)
–enable-toc-back-linksLink from section header to toc允许从标题链接到目录
–user-style-sheet Specify a user style sheet, to load with every page每个页面加载时，指定用户的样式表
–username HTTP Authentication usernamehttp认证用户名
–viewport-size <>Set viewport size if you have custom scrollbars or css attribute overflow to emulate window size如果有自定义滚动条或css属性溢出来模拟窗口大小，请设置视口大小
–window-status Wait until window.status is equal to this string before rendering page等到窗户。在呈现页面之前，状态等于此字符串
–zoom Use this zoom factor (default 1)使用此缩放因子（默认为1）
Headers And Footer Options(页眉和页脚参数选项)
重要程度命令英文解析中文解析
重要–footer-center Centered footer text页脚文字居中
重要–footer-font-name Set footer font name (default Arial)设置页脚的字体 (默认为 Arial)
重要–footer-font-size Set footer font size (default 12)设置页脚的字体大小 (默认为 12)
重要–footer-html Adds a html footer添加一个html作为页脚
重要–footer-left Left aligned footer text页脚文字居左显示
重要–footer-lineDisplay line above the footer在页脚上方显示一条直线分隔正文
重要–no-footer-lineDo not display line above the footer (default)不使用直线分隔页脚与正文(默认)
重要–footer-right Right aligned footer text页脚文字居右显示
重要–footer-spacing Spacing between footer and content in mm (default 0)页脚与正文之间的距离(默认0)
重要–header-center Centered header text页眉文字居中显示
重要–header-font-name Set header font name (default Arial)设置页眉的字体 (默认为 Arial)
重要–header-font-size Set header font size (default 12)设置页眉的字体大小 (默认为 12)
重要–header-html Adds a html header添加一个html作为页眉
重要–header-left Left aligned header text页眉文字居左显示
重要–header-lineDisplay line below the header在页眉下方显示一条直线分隔正文
重要–no-header-lineDo not display line below the header (default)不使用直线分隔页眉与正文(默认)
重要–header-right Right aligned header text页眉文字居右显示
重要–header-spacing Spacing between header and content in mm (default 0)页眉与正文之间的距离(默认0)
重要–replace Replace [name] with value in header and footer (repeatable)将[name]替换为页眉和页脚中的值（可重复）
TOC Options(目录对象参数)
命令英文解析中文解析
–disable-dotted-linesDo not use dotted lines in the toc在目录中不使用虚线
–toc-header-text The header text of the toc (default Table of Contents)设置目录的页眉文本
–toc-level-indentation For each level of headings in the toc indent by this length (default 1em)第级标题在目录中的缩进宽度(默认为1em)
–disable-toc-linksDo not link from toc to sections在目录中不生成指向内容锚点的超链接
–toc-text-size-shrink For each level of headings in the toc the font is scaled by this factor (default 0.8)在目录中每级标题的缩放比例(默认为0.8)
–xsl-style-sheet Use the supplied xsl style sheet for printing the table of contents使用自定义的 XSL 样式表显示目录内容

从标准输入获取参数

如果你需要对许多页面进行批量的处理，并且感觉 wkhtmltopdf 开启比较慢，你可以尝试使用 --read-args-from-stdin 参数。

wkhtmltopdf 命令会为 --read-args-from-stdin 参数发送过来的每一行进行一次单独命令调用。也就是说此参数每读取一行都会执行一次 wkhtmltopdf 命令。而最终执行的命令中的参数是命令行中参数与此参数读取的标准输入流中参数的结合。

下面的代码段是一个例子:

官网给出的例子：

echo "http://qt-project.org/doc/qt-4.8/qapplication.html qapplication.pdf" >> cmds
echo "cover google.com http://en.wikipedia.org/wiki/Qt_(software) qt.pdf" >> cmds
wkhtmltopdf --read-args-from-stdin --book < cmds

使用的时候发现–book没有这个命令，使用下面的命令就可以了。

echo "http://www.baidu.com /tmp/test.pdf" >> cmds
echo "http://www.baidu.com /tmp/test1.pdf" >> cmds
wkhtmltopdf --read-args-from-stdin  < cmds

页眉和页脚

页眉和页脚可以使用参数 --header-* 和 --footer-* 添加到文件中。有些参数(如 --footer-left)需要提供一个字符串text作为参数值。你可以在 text中插入下述变量，他们将会被替换成对应的值。

[page]       当前正在被输出页面的页码
[frompage]   第一页在文档中的页码
[topage]     最后一面在文档中的页码
[webpage]    当前正在被输出页面的URL
[section]    当前正在被输出的章节的名字
[subsection] 当前正在被输出的小节的名字
[date]       本地系统格式的当前日期
[isodate]    ISO 8601 格式的当前日期
[time]       本地系统格式的当前时间
[title]      当前对象的标题
[doctitle]   输出文档的标题
[sitepage]   当前正在处理的对象中当前页面的页码
[sitepages]  当前正在处理的对象中的总页数

大纲

通过在命令行中添加 TOC对象 可以把一个目录添加到生成的PDF文档中，例如下面的代码段：

wkhtmltopdf toc https://blog.csdn.net/u010913170/article/details/124374537  /tmp/test.pdf

这篇关于1天精通wkhtmltopdf-基础知识的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/179663。

相关文章

Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Nginx实现前端灰度发布

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
HTML5 data-*自定义数据属性的示例代码

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.
阅读更多...
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》：本文主要介绍了如何使用CSS模拟HTML的title属性，通过鼠标悬浮显示提示文字效果，通过设置`.tipBox`和`.tipBox.tipContent`的样式，实现了提示内容的隐藏和显示，详细内容请阅读本文，希望能对你有所帮助... 效
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2