bootstrap-fileinput 添加打印按钮

bootstrap-fileinput 提供了 layoutTemplates 渲染模板配置, 只要愿意花时间, 可以自定义大部分功能
直接上代码

$("#file1").fileinput({
        'uploadUrl': ctx + 'fileUpload',
        overwriteInitial: false,
        initialPreviewAsData: true,
        layoutTemplates : {
            actions: '<div class="file-actions">\n' +
                '    <div class="file-footer-buttons">\n' +
                '        {upload} {delete} {zoom} {other} <button type="button" class="kv-file-print btn btn-sm btn-kv btn-default btn-outline-secondary" title="打印"><i class="glyphicon glyphicon-print"></i></button>' +
                '    </div>\n' +
                '    {drag}\n' +
                '    ' +
                '    <div class="clearfix"></div>\n' +
                '</div>',
        }
    });

先直接上效果

现在来解释layoutTemplates 模板里面的意思
更多详情配置文档参考 bootstrap-fileinput中文文档
layoutTemplates.actions 就是操作按钮部分的模板配置

<div class="file-actions">
      <div class="file-footer-buttons">
		{upload} {delete} {zoom} {other}
		<!-- 我们自己添加的 <button type="button" class="kv-file-print btn btn-sm btn-kv btn-default btn-outline-secondary" title="打印"><i class="glyphicon glyphicon-print"></i></button> --> 
      </div>
      {drag}
      <div class="clearfix"></div>
</div>

1. 这个模板就是官网默认值, 建议初步改动的时候直接复制使用, 然后慢慢删
2. 我们在 {other} 标签后面添加了我们自己的代码, 就实现了对按钮组的自定义
3. 然后在html 添加各种事件, 实现各种功能

<button type="button" class="kv-file-print btn btn-sm btn-kv btn-default btn-outline-secondary" title="打印"><i class="glyphicon glyphicon-print"></i></button>