文档章节

html转成pdf 的实践过程以及坑

hengwangm
 hengwangm
发布于 2017/08/02 18:00
字数 295
阅读 16
收藏 0

最近碰到一个需求需要,把页面直接转为文件,最后决定把页面转为pdf最为合适。

正好github有这个ng指令https://github.com/hearsid/ng-html-to-pdf-save,于是便直接拿来用。

该实现主要利用html2canvas.js以及jsPDF。前者将dom直接转换为canvas,后者则生成pdf文件,整个流程都在前端完成。

其中碰到的最大的一个坑,便是因为我需要转为的html为一个模态框modal中的页面,但是只有可视化区域才能截图并生产pdf,这样肯定是有问题的。原来是因为position: absolute 和 position:fixed的元素就会有这样的问题存在。因此需要克隆元素,并将克隆的元素position设置为relative,最后在利用document.body.removeChild();清除掉,便可以解决这个问题。

                        //为了确保absolute定位的元素也能购全部截取,而不是只是可视化区域才能截取
    					//所以这里克隆了元素,设为relative定位
    					function hiddenClone(element){
    						  
    						  var clone = element.cloneNode(true);
    						
    						  var style = clone.style;
    						  style.position = 'relative';
    						  style.top = window.innerHeight + 'px';
    						  style.left = 0;
    						  style.width= "900px" ;
    						  style.boxShadow= 'none' ;
    						 
    						  document.body.appendChild(clone);
    						  return clone;
    					}

 

© 著作权归作者所有

上一篇: Office2PDF实践
下一篇: js学习中。。。
hengwangm
粉丝 1
博文 6
码字总数 1401
作品 0
武汉
程序员
私信 提问
JAVA实现调用打印机打印PDF

JAVA实现调用打印机打印PDF,网上搜索了一大把资料,基本上都是重复。。。下面骂人的一大堆。。我这里来解决一下。 需求:前端调用用接口 后端根据模版生成数据联通打印机直接一键打印! 思路...

jason_kiss
2018/12/27
2.2K
1
html转pdf-使用html标签控制分页

1.使用css来控制同,参考了 https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1551 这个也是浏览器支持的打印时自动换页的class(写个html,用浏览器打印看下就明白),感觉很有用。 2.wk...

小翔
2018/04/19
1K
0
ItextPdf 数字签名,HTML转PDF功能

哼哼,完成这篇,这周的任务算是完成了,上篇文章主要生成了自己的证书与和密码,这篇主要实现数字签名及HTML转成PDF功能。 今天下午把功能基本完成了,常帅走过来说,你知道签名的解签的原理吗?尼...

toolfk
2017/03/22
224
0
在线文档显示组件--FlexPaper

FlexPaper是一个开源轻量级的在浏览器上显示各种文档的组件,被设计用来与PDF2SWF一起使用, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持。它可以被当做Flex的库来使用。...

匿名
2010/01/26
113K
2
JavaScript面试题大坑之隐式类型转换实例代码

1.1-隐式转换介绍 在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算 这种无需程序员手...

peakedness丶
2018/12/12
13
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
40分钟前
6
0
MySQL 表崩溃修复

MySQL日志报错 2019-10-19 13:41:51 19916 [ERROR] /usr/local/mysql/bin/mysqld: Table './initread_hss/user_info' is marked as crashed and should be repaired2019-10-19 13:41:51 1......

雁南飞丶
50分钟前
6
0
Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
今天
4
0
8086汇编基础 start 程序入口标签的示例

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
今天
4
0
uni app 零基础小白到项目实战2

<template> <scroll-view v-for="(card, index) in list" :key="index"> <view v-for =(item, itemIndex) in card"> {{item.value}}</view> </scroll-view></template> GraceUi va......

达达前端小酒馆
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部