龟中的程序员
龟中的程序员

原生JS实现文件自定义位置盖章功能并导出PDF

原生JS实现文件自定义位置盖章功能并导出PDF

实现原理

在需要签章的文件上面创建一个div，可以通过移动这个div来确定签章位置，然后在通过获取这个位置把章子替换到这，并导出PDF，可以多次盖章！

实现截图

原生JS实现文件自定义位置盖章功能并导出PDF_第1张图片
原生JS实现文件自定义位置盖章功能并导出PDF_第2张图片

代码实现

废话不多说，直接上全部代码，不懂的看注释或底下评论。。。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <div class="container">
      <div class="box">
        <div class="imageList">
          <img
            class="table"
            src="./img/工程表(纵向单页).png"
            alt=""
            srcset=""
          />
        div>
        <button class="setSign" style="position: fixed; top: 10px; left: 10px">
          设置签章点位
        button>
        <div style="position: fixed; top: 50px; left: 10px">
          
          选择公章：
          <select id="select">
            <option value="./img/signImage/公章1.png">公章1option>
            <option value="./img/signImage/公章2.png">公章2option>
          select>
        div>
        <button class="getPoint" style="position: fixed; top: 90px; left: 10px">
          确定盖章
        button>
      div>
    div>
  body>
  <script>
    //图片表格是纵向还是横向
    let hasPortrait = true; //默认是纵向
    // 给图片设置宽高(A4纸的宽高)
    let a4Size = {
      w: (595.28 * 4) / 3,
      h: (841.89 * 4) / 3,
    };
    //签章的宽高
    let signSize = {
      w: 140,
      h: 140,
    };
    //签章确定后的点位
    let signPoint = {
      left: "",
      top: "",
    };
    initPdf();

    //设置点击事件
    //生成签章
    document.querySelector(".setSign").addEventListener("click", function () {
      setSign();
    });
    //获取点位
    document.querySelector(".getPoint").addEventListener("click", function () {
      let signDom = document.querySelector(".sign");
      getSignPoint(signDom);
      console.log(signPoint);
      determineSign();
    });
    //确定盖章
    function determineSign() {
      let myselect = document.getElementById("select");
      let url = myselect.options[myselect.selectedIndex].value;
      //创建img
      let signImg = document.createElement("img");
      console.log(url);
      signImg.src = url;
      let option = {
        width: signSize.w + "px",
        height: signSize.h + "px",
        position: "absolute",
        top: signPoint.top,
        left: signPoint.left,
        zIndex: 999,
      };
      for (const key in option) {
        if (Object.hasOwnProperty.call(option, key)) {
          const element = option[key];
          signImg.style[key] = element;
        }
      }
      //删除签章位置样式
      document.querySelector(".sign").remove();
      document.querySelector(".imageList").appendChild(signImg);
    }
    //生成签章的方法
    function setSign() {
      //获取生成签章位置的容器dom
      let imageListDom = document.querySelector(".imageList");
      //创建一个签章div
      let signDiv = document.createElement("div");
      //设置样式
      let option = {
        backgroundColor: "transparent",
        width: `${signSize.w}px`,
        height: `${signSize.h}px`,
        position: "absolute",
        color: "red",
        textAlign: "center",
        lineHeight: `${signSize.h - 10}px`,
        border: "3px dashed red",
        borderRadius: "50%",
        boxSizing: "border-box",
        userSelect: "none",
        zIndex: 999,
      };
      for (const key in option) {
        if (Object.hasOwnProperty.call(option, key)) {
          const element = option[key];
          signDiv.style[key] = element;
        }
      }
      signDiv.className = "sign";
      signDiv.innerHTML = "签章位置";
      imageListDom.appendChild(signDiv);
      //设置移动事件
      addDrag(signDiv);
    }
    //给生成的签章设置移动事件方法
    function addDrag(dom) {
      //给签章设置鼠标移动样式
      dom.style.cursor = "move";
      let initX = null;
      let initY = null;
      //获取初始点击的位置
      dom.addEventListener("mousedown", mouseDownClick);
    }
    //签章移动事件
    function mouseDownClick(e) {
      let dom = document.querySelector(".sign");
      //获取该dom距离可视宽度的距离
      initX = e.pageX - dom.offsetLeft;
      initY = e.pageY - dom.offsetTop;
      //鼠标移动事件设置移动位置
      document.addEventListener("mousemove", moveEle);
      function moveEle(e) {
        let x = e.pageX - initX;
        let y = e.pageY - initY;

        // 签章边界
        if (x < 0) x = 0;
        if (y < 0) y = 0;
        let maxL = (hasPortrait ? a4Size.w : a4Size.h) - signSize.w;
        if (x > maxL) x = maxL;
        let maxT = (hasPortrait ? a4Size.h : a4Size.w) - signSize.h;
        if (y > maxT) y = maxT;

        dom.style.top = y + "px";
        dom.style.left = x + "px";
      }
      // 鼠标松开移出方法
      document.addEventListener("mouseup", function () {
        document.removeEventListener("mousemove", moveEle);
      });
    }
    //获取签章点位
    function getSignPoint(dom) {
      signPoint.left = dom.style.left;
      signPoint.top = dom.style.top;
    }
    //处理图片，是纵向还是横向
    function initPdf() {
      //获取表格图片盒子dom
      let imgBoxDom = document.querySelector(".box");
      let imgListDom = document.querySelector(".imageList");
      //获取图片的dom
      let imgDom = document.querySelector("img");
      let imgInfo = {
        width: imgDom.naturalWidth, //图片真实宽度
        height: imgDom.naturalHeight, //图片真实高度
      };
      // 判断是横向还是纵向
      hasPortrait = imgInfo.width < a4Size.w;
      imgBoxDom.style.width = (hasPortrait ? a4Size.w : a4Size.h) + "px";
      imgBoxDom.style.height = (hasPortrait ? a4Size.h : a4Size.w) + "px";
      imgListDom.style.width = (hasPortrait ? a4Size.w : a4Size.h) + "px";
      imgListDom.style.height = (hasPortrait ? a4Size.h : a4Size.w) + "px";
    }
  script>
  <style>
    .box {
      position: relative;
      width: 100%;
      box-shadow: 0 0 4px 0 #ccc;
      margin: 0 auto;
    }
    .box .imageList {
      background-color: white;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    .imageList .table {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  style>
html>

文件导出功能

看原来的文章，地址：Vue中将页面导出为PDF

你可能感兴趣的:(Vue,JavaScript基础,javascript,pdf,前端)

  • 前后端分离场景下的用户登录玩法&Sa-token框架使用
    两种方案的token、用户登录信息都存储在redis中！！方案一该方案是前端把token和token有效期一起加密存储到浏览器的localStorage中，每次请求时调用前端的getTokenIsExpiry()获取token并检查token是否过期，过期则remove并跳转登录页，这样前端有个问题就是前端也要知道token的有效期，需要和后端的token有效期保持一致，而后端则提供两个拦截器，分
  • 王财贵：发起读经教育的初心 dcfac6b15823
    编者按：本文节录自季谦先生《学》、《只要你明白》两场演讲及《走在时代前端的教育》一文的相关内容，均已经先生修订定稿，题目「我的读书经历及读经推广之初心」为编者所拟。又按（季谦先生按语）前几天我在交流网上发表的一段话或可作为二十年的总结与后续的愿望：读经人在心志上，既本于尊重经典，且长期受经典之熏陶，必有经典的意识，即能开放心胸，赏识同侪，涵纳异见，相观而善，敦厚笃实，单纯宽简，不忘初心，从容中道。
  • 前端：优秀架构的坟墓
    你是否曾经见过那个设计精良的后端系统——界限分明、模式优雅、抽象层层递进——让人不禁感叹，这一定是极致享受的工作环境？然后，你打开了前端代码。顿时，你陷入了全局状态的迷宫，深度嵌套的组件，半途而废的Hooks，以及用十七种挫败方言“喊叫”的CSS之中。优秀的架构一路走过后端，经过DevOps的打磨，成功在云端扩展……却在React的某个上下文里因为一个下拉菜单绊倒，彻底崩溃。我干这一行够久了，见过
  • vue-router和锚点冲突问题 TaoLandd
    传统的锚点定位会与vue-router中的路由设置存在冲突，都是使用'#'进行的，所以这里使用一直方法来模拟锚点跳转，并使用tween.js达到动态的过度效果不使用原生锚点，使用这种方式解决import'../static/js/animation.js'import'../static/js/tween.js'xxxxmethods:{anchor:function(e){letid='anch
  • 【Vue CLI】手把手教你撸插件 vivo互联网技术
    本文首发于vivo互联网技术微信公众号链接：https://mp.weixin.qq.com/s/Rl8XLUX7isjXNUmbw0-wow作者：ZhuPing现如今Vue作为主流的前端框架之一，其健全的配套工具，活跃的开源社区，让广发码农热衷追捧。VueCLI作为其官方的开发构建工具，目前已更新迭代到4.x版本，其内部集成了日常开发用到的打包压缩等功能，简化了常规自己动手配置webpack的烦
  • react native学习record one month jjjjjjjjj¢ reactnativereactnative学习react.js
    ReactNative开发主要面向“跨平台原生App开发”一、基础能力JavaScript/TypeScript•熟练掌握ES6+（async/await、Promise、Map、Set等）•熟悉TypeScript类型系统（常用类型定义、接口、联合类型、泛型）React核心•函数组件+Hook（useState、useEffect、useCallback、useRef等）•状态管理（Contex
  • Java Script学习笔记（1） MERRYME2 笔记java学习javascript
    JavaScript学习笔记（1）(课程：黑马程序员)JavaScript是什么JavaScript是世界最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行现在也可以基于Node.js技术进行服务器端编程JS的组成ECMAScript（JavaScript语法）和DOM（页面文档对象）和BOM（浏览
  • Java-Script学习笔记-1 许我写余生ღ JavaScript学习javascript前端
    文章目录前言JavaScript基本介绍一、js的嵌入方法内嵌式外链式行内式二、js简单语法语句注释变量JavaScript保留关键字三、JavaScript作用域Javascrpt局部变量JavaScript全局变量四、运算符算术运算符比较运算符赋值运算符逻辑运算符五、JavaScript数据类型JavaScript如何判断数据类型数字类型（Number）字符串型（string）布尔类型（boo
  • java Script笔记
    第一章,初始javascript1,javascript的基本概念JavaScript一种直译式脚本语言，一种基于对象和事件驱动并具有安全性的客户端脚本语言；也是一种广泛应用客户端web开发的脚本语言。简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。2,Javascript的特点解释性的脚本语言（代码不进行预编译）与其他脚本语言一样，JavaScript也是一种解释性语言，它
  • 告别项目混乱：基于 pnpm + Turborepo 的现代化 Monorepo 工程化最佳实践 码力无边-OEC 前端web前端框架javascript
    告别项目混乱：基于pnpm+Turborepo的现代化Monorepo工程化最佳实践随着前端项目日益复杂，团队规模不断扩大，我们正面临一个棘手的问题：项目间的代码复用、依赖管理和构建流程变得越来越混乱。传统的“一个项目一个仓库”(Polyrepo)模式，导致了严重的“轮子”重复制造、版本不一致和协作效率低下。是时候引入一种更先进的组织方式了：Monorepo。它并不是一个新概念，Google、Fa
  • 前端性能优化“核武器”：新一代图片格式(AVIF/WebP)与自动化优化流程实战
    前端性能优化“核武器”：新一代图片格式(AVIF/WebP)与自动化优化流程实战当你的页面加载时间超过3秒时，用户的跳出率会飙升到40%以上。而在所有的前端性能优化手段中，图片优化无疑是投入产出比最高的一环。一张未经优化的巨大图片，就足以让你的所有努力付诸东流。然而，很多开发者对图片优化的理解还停留在“压缩一下JPG”的阶段。实际上，我们已经进入了一个由WebP和AVIF主导的新时代。这两种新一代
  • 深入理解 Vue 3 中的 emit
    深入理解Vue3中的emit在Vue3中，组件通信是开发中非常重要的一部分，其中通过emit实现父子组件通信是最常见的方式之一。emit的作用是：子组件可以通过触发自定义事件将数据传递给父组件。在本篇文章中，我们将从以下几个方面详细讲解emit的使用：基础概念使用方法与语法配合props实现完整的父子通信在TypeScript中的类型推断注意事项与最佳实践一、基础概念什么是emit？emit是Vu
  • 【JS笔记】Java Script学习笔记
    JavaScript输出语句document.write()：将内容写入html文档console.log()：将内容写入控制台alert()：弹窗变量JS是弱类型语言，变量无类型var：全局变量，可重复声明let：局部变量，不可重复声明const：常量，不可重复声明数据类型number：数字。整数、浮点数、NaNstring：字符串。单引号：'Hello'双引号："Hello"模板字符串：使用反
  • 文献笔记八十一：植物长链非编码RNA数据库PLncDB 2.0 小明的数据分析笔记本
    论文链接https://academic.oup.com/nar/article/49/D1/D1489/5932847本地文件gkaa910.pdf
  • js运行，控制台显示乱码 wangsrc javascriptlinux开发语言
    "code-runner.executorMap":{  "javascript":"C:\\ProgramFiles\\nodejs\\node.exe"   //node.js的安装路径}参考文章：https://blog.csdn.net/m0_63785629/article/details/129432129
  • vue 不同版本下v-model的底层实现
    下面把「底层实现」和「差异」拆开讲，先给代码级流程，再给一个对照表，面试或源码阅读都能直接用。一、底层实现（编译→运行时的两条链路）Vue2•编译阶段：模板编译器遇到v-model，根据元素类型生成不同的AST指令对象。•运行时指令：src/platforms/web/compiler/directives/model.js里的model()函数把指令对象转成原生标签addProp(el,'val
  • C++ Primer Plus 第6版 中文版 清晰有书签PDF+源代码
    内容提要：C++是在C语言基础上开发的一种集面向对象编程、通用编程和传统的过程化编程于一体的编程语言，是C语言的超集。《C++PrimerPlus中文版》由StehpenPrata著，张海龙、袁国忠译：是根据2003年的ISO/ANSIC++标准编写的。通过大量短小精悍的程序详细而全面地阐述了C++的基本概念和技术。全书分为18章和10个附录，分别介绍了C++程序的运行方式、基本数据类型、复合数据
  • 【人脸识别】FROM：提升遮挡状态下的人脸识别效果 姚路遥遥 人脸识别深度学习计算机视觉人工智能遮挡人脸识别损失
    论文题目：《End2EndOccludedFaceRecognitionbyMaskingCorruptedFeatures》论文地址：https://arxiv.org/pdf/2108.09468v3.pdf代码地址：https://github.com/haibo-qiu/from1.前言人脸识别技术已经取得了显著的进展，主要归功于以下三个因素:lossfunctions:Centerlos
  • 【jquery详细讲解】 ᝰ落念英 前端开发语言webjavascriptjQueryjquery
    (一)、什么是jQueryjQuery是对javascript的一种封装--js的函数库。用于客户端的开发，由美国人在2001年1月推出。(二)、jQuery与javascript的区别：1、本质上的区别：jQuery是一个函数库，基于js语言编写出来的框架，实质上还是属于js。2、代码书写不同，jq更简单。3、使用方法不同：使用jQuery和javascript分别加载DOM，js只执行一次，j
  • 原生前端JavaScript/CSS与现代框架(Vue、React)的联系、区别与运行环境(精简版)
    原生前端JavaScript/CSS与现代框架(Vue、React)的联系、区别与运行环境随着Web技术的不断发展，前端开发已经从最初的原生JavaScript和CSS时代，逐步演进到以Vue、React等为代表的现代前端框架时代。对于许多刚入门或正在转型的前端开发者来说，理解原生技术和现代框架之间的联系、区别，以及各自的运行环境和条件，有助于更好地把握前端技术栈的演变趋势和实际应用场景。一、原生
  • druid oracle不同版本分页,JFinal4.3 框架总结（三） 铁扇不是公举 druidoracle不同版本分页
    7持久层——ActiveRecordActiveRecord模式的核心是：一个Model对象唯一对应数据库表中的一条记录，而对应关系依靠的是数据库表的主键值。因此，ActiveRecord模式要求数据库表必须要有主键。当数据库表没有主键时，只能使用Db+Record模式来操作数据库。JFinal的前端提交的formBean与数据库查询的JavaBean可以使用的是同一个Model对象，Model对
  • React入门到精通：掌握前端开发的必备技能！ 知识分享小能手 学习心得体会编程语言如门react.js前端javascript
    介绍：React是一个由Facebook开发和维护的JavaScript库，用于构建用户界面，特别是用于构建单页应用程序和移动应用程序的用户界面。以下是对React的详细介绍：虚拟DOM：React通过使用虚拟DOM（DocumentObjectModel）来提高应用的性能。虚拟DOM是真实DOM的轻量级副本，React在虚拟DOM上进行操作，然后高效地更新真实DOM，这种方式比直接操作DOM要快
  • layUI树形组件出现偶尔加载不出来的情况 suoh's Blog ❤️❤️--layui❤️❤️--vue2核心技术栈layui树形结构无法加载treeList加载不出来layui树形组件不显示
    用vue自带的nextTick函数强制执行树形结构nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数this.$nextTick(()=> {  this.render(this.data); }) 
  • JSON全面解析：轻量级数据交换的核心技术 新人码农11111 jsonpython
    目录JSON的本质特征⚙️序列化：数据到字符串的转换反序列化：字符串到数据的还原实际应用场景⚠️常见陷阱与解决方案最佳实践建议在当今数据驱动的时代，JSON（JavaScriptObjectNotation）已成为最流行的轻量级数据交换格式。本文将深入剖析JSON的核心特性及其在Python中的应用，帮助开发者高效处理数据序列化与反序列化。JSON的本质特征JSON采用纯文本格式，具有跨平台、易读
  • React 开发（一）：入门 - 从 0 到 1 的学习之旅 全栈探索者chen reactreact.js学习前端前端框架程序人生开发语言javascript
    React开发（一）：入门-从0到1的学习之旅1.前言在前端开发领域，React是一个备受推崇的JavaScript库，广泛应用于构建用户界面。它的组件化架构、虚拟DOM和高效的更新机制使得开发复杂的应用变得更加简洁和高效。在这篇文章中，我们将从零开始学习React，了解它的基本概念和如何搭建第一个项目。2.什么是React？React是一个用于构建用户界面的JavaScript库，由Facebo
  • 前端15 徒做嫁衣
    jquery用法思想一选择某个网页元素，然后对它进行某种操作。jquery选择器jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。$(document)//选择整个文档对象$('li')//选择所有的li元素$('#myId')//选择id为myId的网页元素$('.myClass')//选择class为myClass的元素$('input[na
  • OpenHarmony解读之设备认证：解密流程全揭秘 陈乔布斯 HarmonyOS鸿蒙开发OpenHarmonyharmonyosopenHarmony嵌入式硬件鸿蒙开发respons
    往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）①鸿蒙应用开发与鸿蒙系统开发哪个更有前景？②嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~③对于大前端开发来说，转鸿蒙开发究竟是福还是祸？④鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？⑤记录一场鸿蒙开发岗位面试经历~⑥持续更新中……一、概述本文重点介绍客户端收到end响应消息之后的处理过程。二、源码分析这一模块的源码位于：/bas
  • 前端学习笔记：React.js中state和props的区别和联系
    文章目录1.`props`（属性）定义用途示例2.`state`（状态）定义用途示例3.核心区别4.常见使用场景props的场景state的场景5.交互模式父组件修改子组件状态子组件通知父组件6.最佳实践总结在React.js中，state和props是两个核心概念，用于管理组件的数据和数据流。它们的设计目的不同，但共同构成了React组件的状态管理系统。1.props（属性）定义外部传入的数据：
  • Vue4进阶指南：从零到项目实战（上）
    本书全卷Vue4进阶指南：从零到项目实战（上）Vue4进阶指南：从零到项目实战（中）Vue4进阶指南：从零到项目实战（下）目录前言：开启Vue的优雅之旅致读者：Vue的魅力与本书愿景Vue演进哲学：从Vue2到Vue4的蜕变之路环境准备：现代化开发栈配置第一部分：筑基篇-初识Vue的优雅世界第1章：Hello,Vue!1.1Vue核心思想：渐进式框架、声明式渲染、组件化1.2快速上手：CDN引入与
  • 全栈Todo应用实战：从零到一的本地部署与深度解析
    全栈Todo应用实战：从零到一的本地部署与深度解析前言在现代Web开发中，全栈应用已成为主流。本文将以一个经典的Todo（待办事项）应用为例，详细记录从项目下载、环境配置、后端启动、数据库交互到前端运行的完整流程。我们将深入探讨在此过程中遇到的一个典型问题——CORS与API请求失败，并提供从“快速修复”到“最佳实践”的解决方案。这不仅是一份操作指南，更是一次宝贵的实战经验总结。你将从本博客中学到
  • java线程Thread和Runnable区别和联系 zx_code javajvmthread多线程Runnable
    我们都晓得java实现线程2种方式，一个是继承Thread，另一个是实现Runnable。 模拟窗口买票，第一例子继承thread，代码如下 package thread; public class ThreadTest { public static void main(String[] args) { Thread1 t1 = new Thread1(
  • 【转】JSON与XML的区别比较 丁_新 jsonxml
    1.定义介绍 (1).XML定义 扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。 XML是标
  • c++ 实现五种基础的排序算法 CrazyMizzz C++c算法
    #include<iostream> using namespace std; //辅助函数，交换两数之值 template<class T> void mySwap(T &x, T &y){ T temp = x; x = y; y = temp; } const int size = 10; //一、用直接插入排
  • 我的软件 麦田的设计者 我的软件音乐类娱乐放松
         这是我写的一款app软件，耗时三个月，是一个根据央视节目开门大吉改变的，提供音调，猜歌曲名。1、手机拥有者在android手机市场下载本APP，同意权限，安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。（同时软件自动播放背景音乐）。3、用户登录到主页后，会有五个模块。a、点击不胫而走，用户得到开门大吉首页部分新闻，点击进入有新闻详情。b、
  • linux awk命令详解 被触发 linux awk
    awk是行处理器: 相比较屏幕处理的优点，在处理庞大文件时不会出现内存溢出或是处理缓慢的问题，通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理，然后输出 awk命令形式: awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file [-F|-f|-v]大参数，-F指定分隔符，-f调用脚本，-v定义变量 var=val
  • 各种语言比较 _wy_ 编程语言
                        Java Ruby PHP 擅长领域                  
  • oracle 中数据类型为clob的编辑 知了ing oracle clob
    public void updateKpiStatus(String kpiStatus,String taskId){ Connection dbc=null; Statement stmt=null; PreparedStatement ps=null; try { dbc = new DBConn().getNewConnection(); //stmt = db
  • 分布式服务框架 Zookeeper -- 管理分布式环境中的数据 矮蛋蛋 zookeeper
    原文地址： http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解 本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础，最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取，Zookeeper 的安装非常简单，下面将从单机模式和集群模式两
  • tomcat数据源 alafqq tomcat
    数据库 JNDI(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。 没有使用JNDI时我用要这样连接数据库： 03.  Class.forName("com.mysql.jdbc.Driver");  04.  conn
  • 遍历的方法 百合不是茶 遍历
                                                          遍历 在java的泛
  • linux查看硬件信息的命令 bijian1013 linux
    linux查看硬件信息的命令 一.查看CPU： cat /proc/cpuinfo   二.查看内存： free   三.查看硬盘： df   linux下查看硬件信息 1、lspci 列出所有PCI 设备； lspci - list all PCI devices:列出机器中的PCI设备（声卡、显卡、Modem、网卡、USB、主板集成设备也能
  • java常见的ClassNotFoundException bijian1013 java
    1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory   添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization    
  • 【Gson五】日期对象的序列化和反序列化 bit1129 反序列化
    对日期类型的数据进行序列化和反序列化时，需要考虑如下问题：   1. 序列化时，Date对象序列化的字符串日期格式如何 2. 反序列化时，把日期字符串序列化为Date对象，也需要考虑日期格式问题 3. Date A -> str -> Date B,A和B对象是否equals   默认序列化和反序列化     import com
  • 【Spark八十六】Spark Streaming之DStream vs. InputDStream bit1129 Stream
      1. DStream的类说明文档：   /** * A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous * sequence of RDDs (of the same type) representing a continuous st
  • 通过nginx获取header信息 ronin47 nginx header
    1. 提取整个的Cookies内容到一个变量，然后可以在需要时引用，比如记录到日志里面， if ( $http_cookie ~* "(.*)$") {         set $all_cookie $1; }     变量$all_cookie就获得了cookie的值，可以用于运算了
  • java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 bylijinnan java
    参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984 写了个java版的： public class Print_1_To_NDigit { /** * Q65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 * 1.使用字符串
  • Netty源码学习-ReplayingDecoder bylijinnan javanetty
    ReplayingDecoder是FrameDecoder的子类，不熟悉FrameDecoder的，可以先看看 http://bylijinnan.iteye.com/blog/1982618 API说，ReplayingDecoder简化了操作，比如： FrameDecoder在decode时，需要判断数据是否接收完全： public class IntegerH
  • js特殊字符过滤 cngolon js特殊字符js特殊字符过滤
    1.js中用正则表达式 过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) {    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&mdash;—|{}【】‘；：”“'。，、？]"
  • hibernate使用sql查询 ctrain Hibernate
    import java.util.Iterator; import java.util.List; import java.util.Map; import org.hibernate.Hibernate; import org.hibernate.SQLQuery; import org.hibernate.Session; import org.hibernate.Transa
  • linux shell脚本中切换用户执行命令方法 daizj linuxshell命令切换用户
    经常在写shell脚本时，会碰到要以另外一个用户来执行相关命令，其方法简单记下：   1、执行单个命令：su - user -c "command" 如：下面命令是以test用户在/data目录下创建test123目录 [root@slave19 /data]# su - test -c "mkdir /data/test123" 
  • 好的代码里只要一个 return 语句 dcj3sjt126com return
    别再这样写了：public boolean foo() {    if (true) {         return true;     } else {          return false;    
  • Android动画效果学习 dcj3sjt126com android
    1、透明动画效果 方法一：代码实现 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, fals
  • linux复习笔记之bash shell (4)管道命令 eksliang linux管道命令汇总linux管道命令linux常用管道命令
    转载请出自出处： http://eksliang.iteye.com/blog/2105461     bash命令执行的完毕以后，通常这个命令都会有返回结果，怎么对这个返回的结果做一些操作呢？那就得用管道命令‘|’。     上面那段话，简单说了下管道命令的作用，那什么事管道命令呢？     答：非常的经典的一句话，记住了，何为管
  • Android系统中自定义按键的短按、双击、长按事件 gqdy365 android
    在项目中碰到这样的问题： 由于系统中的按键在底层做了重新定义或者新增了按键，此时需要在APP层对按键事件（keyevent）做分解处理，模拟Android系统做法，把keyevent分解成： 1、单击事件：就是普通key的单击； 2、双击事件：500ms内同一按键单击两次； 3、长按事件：同一按键长按超过1000ms（系统中长按事件为500ms）； 4、组合按键：两个以上按键同时按住；
  • asp.net获取站点根目录下子目录的名称 hvt .netC#asp.nethovertreeWeb Forms
    使用Visual Studio建立一个.aspx文件(Web Forms)，例如hovertree.aspx,在页面上加入一个ListBox代码如下： <asp:ListBox runat="server" ID="lbKeleyiFolder" />   那么在页面上显示根目录子文件夹的代码如下： string[] m_sub
  • Eclipse程序员要掌握的常用快捷键 justjavac javaeclipse快捷键ide
      判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。   曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  写道 程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可
  • c++编程随记 lx.asymmetric C++笔记
     为了字体更好看，改变了格式……   &&运算符：   #include<iostream> using namespace std; int main(){      int a=-1,b=4,k;      k=(++a<0)&&!(b--
  • linux标准IO缓冲机制研究 音频数据 linux
    一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中，操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中，也就是说，数据会先被拷贝到操作系统内核的缓冲区中，然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区，
  • 随想 生活 暗黑小菠萝 生活
    其实账户之前就申请了，但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的，但是有多大的进步可能只有我自己知道。   毕业的时候班里12个女生，真正最后做到软件开发的只要两个包括我，PS：我不是说测试不好。当时因为考研完全放弃找工作，考研失败，我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术，增强自己的实战能力，以至于后来找工作比较费劲。我
  • 我认为POJO是一个错误的概念 windshome javaPOJO编程J2EE设计
                  这篇内容其实没有经过太多的深思熟虑，只是个人一时的感觉。从个人风格上来讲，我倾向简单质朴的设计开发理念；从方法论上，我更加倾向自顶向下的设计；从做事情的目标上来看，我追求质量优先，更愿意使用较为保守和稳妥的理念和方法。    &
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他