mPDF生成可填充PDF复选框在Chrome打印及iOS Acrobat显示异常求助

• 替换PDF生成模式
  你当前使用的MODE_CORE仅加载PDF核心标准字体，对表单控件的兼容性极差，将mode参数替换为Pdf::MODE_UTF8或Pdf::MODE_BLANK可解决大部分渲染器的控件显示问题。
• 补充复选框强制样式
  在你引入的fillablepdfs.css文件中新增针对复选框的显式样式，覆盖不同渲染器的默认表单样式：

  input[type="checkbox"] {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border: 1px solid #000000;
      background: #ffffff;
  }
  input[type="checkbox"]:checked {
      background: #ffffff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="black" stroke-width="2" fill="none"/></svg>') center no-repeat;
  }
  

  用内联SVG作为对勾样式，无需额外引入资源，兼容性远高于原生表单的勾选符号。
• 调整mPDF配置项
  1. 将CSSselectMedia参数从print改为screen，Chrome打印预览默认会过滤print媒体下的部分表单控件样式
  2. 新增formElementAcrobatCompatibility和printSheetBackground参数，解决Adobe Acrobat和打印场景的表单兼容问题
     修改后的实例化代码参考：

  $pdf = new Pdf([
              'mode' => Pdf::MODE_UTF8, 
              'format' => Pdf::FORMAT_LETTER, 
              'orientation' => Pdf::ORIENT_PORTRAIT, 
              'destination' => Pdf::DEST_BROWSER, 
              'content' => $html, 
              'cssFile' => '@backend/web/css/fillablepdfs.css',
              // set mPDF properties
              'options' => [
                  'title' => $title, 
                  'useActiveForms' => true, 
                  'CSSselectMedia' => 'screen',
                  'formElementAcrobatCompatibility' => true,
                  'printSheetBackground' => true
              ],
              // call mPDF methods
              'methods' => [
              ]
          ]);
  

• 额外验证步骤
  生成PDF后可先在桌面端Adobe Acrobat中测试复选框勾选效果，确认正常后再验证Chrome打印和iOS端的显示效果，避免因渲染器缓存导致的校验误差。

内容的提问来源于stack exchange，提问作者Scott Haeger