在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }

Base64 在HTML中的使用

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

        private void btnBase64_Click(object sender, EventArgs e)
        {
            var base64 = ImageHelper.ImageToBase64Str(this.pictureBox1.Image);
            if(chkData.Checked)
            {
                base64 = "data:image/jpeg;base64," + base64;
            }
            this.txtBase64.Text = base64;
        }

而其中调用是通过我们公用类库中的图片辅助类进行，详细转换代码如下所示。

        /// <summary>
        /// 从文件中转换图片对象到Base64编码
        /// </summary>
        /// <param name="imageFilePath">图片文件路径</param>
        /// <returns></returns>
        public static string ImageToBase64Str(string imageFilePath)
        {
            Image image = Image.FromFile(imageFilePath);
            using (MemoryStream ms = new MemoryStream())
            {
                image.Save(ms, image.RawFormat);//ImageFormat.Jpeg
                byte[] imageBytes = ms.GetBuffer();
                string imgBase64Str = Convert.ToBase64String(imageBytes);

                //释放资源，让别的使用
                image.Dispose();
                return imgBase64Str;
            }
        }

        /// <summary>
        /// 转换图片对象到Base64编码
        /// </summary>
        /// <param name="image">Image图片对象</param>
        /// <returns></returns>
        public static string ImageToBase64Str(Image image)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                image.Save(ms, image.RawFormat);//ImageFormat.Jpeg
                byte[] imageBytes = ms.GetBuffer();
                string imgBase64Str = Convert.ToBase64String(imageBytes);
                return imgBase64Str;
            }
        } 

这样，我们在前端Vue的项目中，就可以赋值这段图片Base64代码到HTML文件中就可以了，如下是前端Vue项目代码所示（缩减了部分Base64编码）。

这样我们就可以在页面中放置一个Base64编码的图片在页面中了。

import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'

Vue.component('vue-drag-resize', VueDragResize)

import VueDragResize from 'vue-drag-resize'
export default {
  components: { VueDragResize },

<template>
    <div id="app">
        <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
            <h3>Hello World!</h3>
            <p>{{ top }} х {{ left }} </p>
            <p>{{ width }} х {{ height }}</p>
        </VueDragResize>
    </div>
</template>

<vue-drag-resize :x="0">

<vue-drag-resize :y="0">

    print () {
      const print = this.$refs.print.innerHTML
      const printPart = print + csstyle;
      const newTab = window.open('_blank');
      newTab.document.body.innerHTML = printPart;
      newTab.print();
      newTab.close();
    },

在项目中，涉及到了html内容打印的需求，调用了浏览器的window.print用于打印

显示不全问题

由于window.print是1:1打印，打印内容过宽时，浏览器会自动从左截取掉超宽部分，因此在打印前需将页面进行调整
打印页边距设定为 0mm 时，网页内最大元素的分辨率：794×1123
因此可以将内容div设置为700px，剩余空间设置为页边距

去除浏览器默认页眉页脚

页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型page的外边距，使得内容不会延伸到页面的边缘，再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距

由于window.print打印自带页眉页脚，用于存放打印url，日期时间，页面名称等内容，为屏蔽这些内容可使用css进行屏蔽

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1cm;
  }
}

只屏蔽页脚

@page { margin-bottom: 0; }

有两个事件可以监听到到打印事件，一个是beforeprint,一个是afterprint，分别表示打印事件触发前后。
这个事件在 IE6 就已经支持了，兼容大概是 Firefox、IE全支持, Chrome63+支持, Safari暂不支持

我们可在处理事件onbeforeprint() 将一些不需要打印的元素隐藏，和打印后的处理事件 onafterprint()放开隐藏的元素

window.addEventListener('beforeprint', ()=> {
  document.body.innerHTML = '打印前触发';
});

window.addEventListener('afterprint', ()=> {
  document.body.innerHTML = '打印后触发';
});

 @media print {
    @page {
      // 纵向
      size: portrait; 
 
     // 横向
      size: landscape;
 
      // 边距
      margin: 0cm 0cm 0cm 0cm;
    }
  }