JS - 使用 html2canvas 将页面转PDF 本方法可以将页面元素块转为pdf. 网站地址 jspdf.js 官网地址:http://jspdf.com GitHub 主页:https://github.com/MrRio/jsPDF jspdf.js 文档:https://artskydj.github.io/jsPDF/docs/jspdf.js.html html2canvas.js 官网地址:https://html2canvas.hertzen.com/ html2canva

1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图.并要求导出word,并打印.html里面内容是通过js刷新出来的,是动态的数据. 2.项目难点: 1)html导出到word,不太可能,页面比较复杂,内容比较多,而且word不支持. 2)html页面存在多个 echart图表,根本无法导出. 3.折中方案 采用jspdf插件,将html页面导出成

1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.getElementsByClassName("class名"); 3.通过元素标签去获取元素 document.getElementsByTagName("标签名"); 4.通过css选择器去获取元素 document.querySelectorAll("cs

今天在网上看到一位大神写的一篇文章,出处记不得了,只是因为我在做项目的时候需要用到所以看了一眼. 经理要求我把两张图表上下排列(非响应式的)改成可以适配浏览器的,刚开始只是想改样式,看到代码才发现原来他是写在jq里面的,尝试这用jq该样式的时候发现这个canvas是后渲染根本没有什么用处,搞了半天没有用修改样式的方法搞,最用才想到js监测浏览器页面的缩放可以在生产canvas的时候动态修改height于是就百度了一下js获取页面缩放比例的方法. //获取当前页面的缩放值 function det

1.常见用法           using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New ApplicationClass();    Microsoft.Office.Interop.Excel.Workbook book = ExcelApp.Workbooks.Add(); 2) 更改 Excel 标题栏: ExcelApp.Caption := '应用程序调用 Micr

网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面html保存为EXCEL文件(此步骤有多种方法,就不详细探讨了.只要能将web页面转成EXCEL文件,剩下的就好说了.) StringWriter html = new StringWriter(); HtmlTextWriter tw = new HtmlTextWriter(html); base

jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); //获取页面的文档高度 $(document).height(); //获取页面的文档宽度 : $(document).width(); //浏览器当前窗口文档body的高度: $(document.body).height(); //浏览器当前窗口文档body的宽度: $(document.bod

下面这个例子展示了如何使用js获取页面中元素的值,并且将这些值作为参数执行Ajax请求. $("#submit-task").bind("click", function (event) { event.preventDefault(); event.stopPropagation(); if(validate() == false){ exit; } var submitBtn = this; // 禁止提交按钮 $(submitBtn).attr('disabl

利用JS获取页面的传值,此方法只适应Get传值. 获取页面之间的传值,在后台我们很容易获取,那我们在前台只利用JS怎么写呢? 在看代码之前你需要了解的 ① 参考:W3C Location 对象 Location 对象包含有关当前 URL 的信息. Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. ②Map  之前有介绍过:Map和Set ,如果需要更深一层理解 查看Map 这两个知识点搞清楚之后,我们的代码就很好写了 我们在一个页面放一

<div class="search">        产品简码:@Html.TextBox("ProCode", "")        产品名称:@Html.TextBox("ProName", "")        产品风格:@Html.TextBox("StyleType", "")        产品材质:@Html.TextBox("M

一般页面都是.jsp页面,所以要把.jsp转换成html,在生成pdf,在网上找了好多方法,只有用一个插件,wkhtmltopdf-0.8.3.exe,生成的pdf会相对的好看. 先附上我做的.jsp页面. <%@ page language="java" contentType="text/html;charset=utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core&qu

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件.如果采用屏幕截图的话,默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容. 我在网上找了一段时间,搜集到了一些解决方案,在这里分享给广大程序员. 这个解决方案包含了两个步骤,将前端页面转化为PDF: 1. 遍历当前网页的DOM结构,收集所有DOM树上每个节点的元素信息及相应样式,渲染出canvas图像.这个遍历和渲染操作封装在脚本文件html2canvas.js里. 2.

我们可以用javascript获得其中的各个部分 1, window.location.href 整个URl字符串(在浏览器中就是完整的地址栏) 本例返回值: http://ifisker.com/blog/post/0703/window.location.html# 2,window.location.protocol URL 的协议部分 本例返回值:http: 3,window.location.host URL 的主机部分 本例返回值:www.x2y2.com 4,window.loca

一. 通过window.location获取各项参数 1.获取页面完整的url url = window.location.href; 2.获取页面的域名 host = window.location.host; host2=document.domain; 应用场景:页面跳转,开发环境和测试环境域名不同,所以需要动态获取后进行拼接跳转的url. 二.javascript正则获取url中的参数 //正则获取url中的参数 function URL_Request(strName) { var s

先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)        document.documentElement.scrollTop //firefox (javascript)        document.documentElement.scrollLeft //firefox (javascript)        document.body.scr

今天有同学问如何用 JS 正则表达式获取一段文本中的超链接,并对超链接进行处理,想了几分钟,写了下面的代码: var re = /https?:\/\/[\w\.:~\-\d\/]+(?:\?[\w\d\-_&=%]+)?(?:#[^\s]+)?/i; 这个正则表达式处理这种类型的URL: protocol://host:port/path?param=value#xxoo 想法是好的,但总要测试通过才可以,随即又写了一段获取页面内所有带有 src, href 属性的代码: function g

一般情况下,我们通过十六进制的方式设置页面颜色值 如#64e164 但当我们通过js获取这个dom颜色值的时候,返回的值却可能不是十六进制的,所以比较的时候需要分浏览器进行 在火狐和谷歌浏览器中,返回的是rgb格式表示的颜色值,如前面的#64e164  返回的是  rgb(100, 225, 100) 这时候就需要用rgb格式的字符串和获取的值作比较才会返回true 但是在ie中,则需要使用16进制的方式比较才能返回true

下面我们举例一个URL,然后获得它的各个组成部分: http://i.cnblogs.com/EditPosts.aspx?opt=1 window.location.href (设置或获取整个 URL 为字符串) var test = window.location.href; alert(test); // 返回:http://i.cnblogs.com/EditPosts.aspx?opt=1 window.location.protocol (设置或获取 URL 的协议部分) var t

jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); //获取页面的文档高度 $(document).height(); //获取页面的文档宽度 : $(document).width(); //浏览器当前窗口文档body的高度: $(document.body).height(); //浏览器当前窗口文档body的宽度: $(do

查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="keleyiimagescount" style="background:url(http://keleyi.com/keleyi/phtml/picnext/images/k05.jpg);width:550px;height:380px;"></div><

<script type="text/javascript"> window.onload=function(){ map_width=document.body.clientWidth;//获取body宽度 map_height=document.documentElement.clientHeight;//获取页面可见高度 //alert(map_width); //alert(map_height); //下面两行最后的"px"必须加上,折腾了半天