使用paper css打印带背景的A4票据 - xiaohao0576/odoo-doc GitHub Wiki

下面的代码，是利用paper css库，实现利用已设计好的pdf文件作为背景，然后使用绝对定位在背景图片上填写动态内容，最后使用浏览器打印出填写后的pdf，具体步骤如下

  1. 准备一个设计好的pdf文件
  2. 使用pdf24工具 https://tools.pdf24.org/en/pdf-to-images ，把pdf转换成DPI为300的png图片
  3. 在css style中，为.sheet设置背景图像
  4. 使用css绝对定位，在特定的区域设置div， 填写内容
  5. 在chrome打印的时候，不要忘勾选打印背景图片
<t>
&lt;!DOCTYPE html&gt;
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>VAT Invoice</title>
    <!-- Normalize or reset CSS with your favorite library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"/>
    <!-- Load paper.css for happy printing -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css"/>
    
    <style>
       	@page { 
	        size: A4
	    } 
	    
	    /* Add Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Hanuman:[email protected]');
        @import url('https://fonts.googleapis.com/css2?family=Moul');
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:[email protected]');
        
        .sheet  {
            background-image: url('https://d2cnxe6.cloudfront.net/static/dr-accounting/invoice01.png');
            background-position: center; /* 居中显示 */
            background-size: contain;
        }
        
        /* 绝对定位div样式 */
        .positioned-div {
            position: absolute; /* 绝对定位 */
            padding: 0; /* 去除内边距 */
            border: 1px solid red; /* 红色边框 */
            background-color: rgba(255, 255, 0, 0.5); /* 半透明黄色背景，方便观察 */
            color: black;
            user-select: none; /* 防止文本选择 */
            box-sizing: border-box; /* 边框包含在尺寸内 */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
    </style>
  </head>
  <body class="A4">
    <section class="sheet">
        <!--这里放绝对定位的文本框-->
    </section>
  </body>
</html>
</t>
⚠️ **GitHub.com Fallback** ⚠️