DataTable表格图片/图标在PDF及打印视图不显示的解决咨询

问题分析 #

表格内的<img>图标和FontAwesome图标无法在PDF/打印视图显示，而附加的logo正常，核心原因是：

• PDF导出依赖pdfmake，它对图片的引用方式要求严格，相对路径的本地图片无法直接被解析；
• 打印视图可能存在CSS优先级或图片加载的问题，FontAwesome图标本质是字体，需要确保打印样式中包含字体文件。

一、解决PDF导出时的图标显示问题 #

1. 将本地图片转为Base64编码 #

pdfmake无法直接读取本地相对路径的图片，需要把edit.png转为Base64格式（可通过在线工具完成转换），之后在DataTable的PDF自定义配置中处理表格内的图片。

2. 修改PDF按钮的自定义逻辑 #

在customize函数中遍历表格内容，替换图片的src为Base64编码：

{
    extend: 'pdfHtml5',
    customize: function (doc) {
        // 添加logo（保留原有逻辑）
        doc.content.splice(1, 0, {
            margin: [0, 0, 0, 12],
            alignment: 'center',
            image: '你的logo的Base64编码'
        });
        
        // 处理表格内的edit.png
        doc.content[2].table.body.forEach(row => {
            row.forEach(cell => {
                if (cell && cell.text && cell.text.includes('edit.png')) {
                    cell.image = 'edit.png的Base64编码';
                    delete cell.text; // 移除原有文本引用
                    cell.width = 25; // 设置图片宽度
                }
            });
        });
    }
}

3. FontAwesome图标处理 #

如果使用FontAwesome图标（如<i class="fa fa-edit"></i>），需将图标对应的Unicode字符直接写入，同时确保pdfmake包含FontAwesome字体：

customize: function (doc) {
    doc.defaultStyle.font = 'Roboto';
    doc.styles.title.font = 'Roboto';
    // 添加FontAwesome字体配置
    doc.fonts = {
        Roboto: {
            normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
            bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
            italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
            bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
        },
        FontAwesome: {
            normal: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf'
        }
    };
    // 遍历表格替换FontAwesome图标
    doc.content[2].table.body.forEach(row => {
        row.forEach(cell => {
            if (cell && cell.text && cell.text.includes('fa-edit')) {
                cell.text = '\uf044'; // fa-edit对应的Unicode
                cell.font = 'FontAwesome';
                cell.fontSize = 16;
            }
        });
    });
}

二、解决打印视图的图标显示问题 #

1. 修复<img>标签的打印样式 #

现有打印CSS用background设置图片，与原HTML的<img>标签冲突，修改打印CSS：

@media print {
    #example {
        margin-top: 100px;
    }
    .edit-icon {
        display: inline-block !important;
        width: 25px;
        height: 25px;
        padding: 5px;
        border-radius: 4px;
        background: none !important; /* 移除冲突的背景设置 */
    }
    img.edit-icon {
        visibility: visible !important; /* 确保图片不被隐藏 */
    }
}

2. FontAwesome图标打印处理 #

FontAwesome是字体，需确保打印样式中允许加载字体，添加以下CSS：

@media print {
    @font-face {
        font-family: 'FontAwesome';
        src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf') format('truetype');
    }
    .fa {
        font-family: 'FontAwesome' !important;
        visibility: visible !important;
    }
}

3. 打印按钮的自定义优化 #

确保打印窗口能正确加载图片和字体，修改打印按钮的customize函数：

{
    extend: 'print',
    customize: function (win) {
        // 预加载图片避免打印时加载失败
        $(win.document.body).prepend('<img src="edit.png" style="display:none;">');
        // 引入FontAwesome样式到打印窗口
        $(win.document.head).append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');
        // 添加logo（保留原有逻辑）
        $(win.document.body).prepend('<img src="image.png" style="margin-bottom:20px;">');
    }
}

三、额外注意事项 #

• 确保所有图片路径正确，或统一使用Base64编码避免路径问题；
• 若使用FontAwesome 5+版本，需对应调整字体文件URL和Unicode字符；
• 移除重复引入的资源（当前代码中重复引入了DataTables和pdfmake，建议只保留最新版本）。

内容的提问来源于stack exchange，提问作者Chandan Kumar Panigrahi