您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

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

时间:2022-03-22 14:10:00  来源:  作者:海椰人

在一些内部OA或者流转的文件,或者给一些客户的报价文件、合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&Element的前端项目采用第三方组件

vue-drag-resize和图片转换Base64的方式实现图片印章的盖章处理。

1、图片转换为Base64处理

图片转换为Base64编码可以通过在线工具的转换方式实现图片转Base64编码,网上很多在线的处理,百度一下即可。

如:
https://c.runoob.com/front-end/59/ 或者 https://tool.chinaz.com/tools/imgtobase 试过都可以,非常方便。

如果我们喜欢通过C#代码进行图片的转换也可以使用自己封装的函数实现处理,如下所示。

电子签章处理文件和打印基于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...." />

我们使用C#代码转换的处理代码如下所示。

        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编码)。

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

 

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

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

 

2、使用vue-drag-resize组件实现印章图片的拖动

常规的图片,放置在页面中,位置是固定的,如果我们需要拖动印章,那么就需要引入可拖动面板的Vue组件vue-drag-resize来处理它了。

vue-drag-resize是Github上的一个开源组件,地址是:
https://github.com/kirillmurashov/vue-drag-resize

这个组件的使用和其他组件的使用方式一样,非常方便。

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 },

它的HTML代码如下所示。

<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>

为了把印章图片可以拖动,我们在HTML中放置印章图片包含在这个组件面板中。

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

 

如下面代码所示。

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

 

把图片放置在这个组件容器中后,图片就可以随意拖动,确认位置后,就可以确定它的位置,我们可以通过记录图片的位置X, Y的值并存储起来,下次直接确定位置也可以。

定义组件的初始X位置。

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

定义组件的初始Y位置。

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

例如我们定义了一个报价单,并通过设置,把图片放置在页面中,让使用者可以通过拖动印章的方式,放到合适的位置上去,然后进行打印报价单即可带有印章的报价单出来了。

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

 

这样就可以实现电子印章的拖动和放置处理了,记住其位置和状态,下次就可以直接定位到指定的位置上了。

另外,一般文档都需要打印,关于打印的处理,有很多方式,可以使用print.js(
https://github.com/crabbly/Print.js),也可以使用 vue-print-nb (https://github.com/Power-kxLee/vue-print-nb),甚至复杂的定义可以考虑使用CLODOP组件来处理,不过我们这里可以简单的内置windows 对象的打印操作方式来处理普通的页面打印即可。

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

 

    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();
    },
电子签章处理文件和打印基于ABP框架的前端项目Vue&Element

 

打印效果如下所示,采用了对应的CSS样式处理后,和实际的页面效果相当。

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

 

在项目中,涉及到了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;
    }
  }

 

文章转自
https://www.cnblogs.com/wuhuacong/p/16033604.html



Tags:ABP框架   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
电子签章处理文件和打印基于ABP框架的前端项目Vue&Element
在一些内部OA或者流转的文件,或者给一些客户的报价文件、合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印...【详细内容】
2022-03-22  Search: ABP框架  点击:(363)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(14)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(17)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(22)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(29)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(36)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(27)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(77)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(84)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(44)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(76)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条