# html-camera

**Repository Path**: zhaolongwei_zlw/html-camera

## Basic Information

- **Project Name**: html-camera
- **Description**: 打印HTML 分页打印 分页组合打印 HTML转图片，转base64
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-06-08
- **Last Updated**: 2023-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# html-camera

#### 兼容性
* 依赖html2canvas(https://github.com/niklasvh/html2canvas)，且该依赖需要手动安装，其官方文档：
* http://html2canvas.hertzen.com/documentation
* 兼容性：
* Firefox 3.5+
* Google Chrome
* Opera 12+
* IE9+
* Edge
* Safari 6+
> 不支持iframe  
> 不能在浏览器插件中使用  
> 不支持Flash  
> 不支持古代浏览器 

#### 项目介绍
>局部打印HTML 分页打印 分页组合打印 HTML转图片、转base64

#### 安装教程
1. npm i html-camera html2canvas
2. 直接在页面中引用：<script src="html-camera.js"></script> 或 使用模块化加载：var htmlCamera = require('html-camera.js');  

 * tips:
 > ***处理跨域图片***：canvas对于图片资源有同源限制，需要图片资源响应头设置 Access-Control-Allow-Origin，且设置参数html2canvasOptions : {useCORS: true}
 > 需要引入html2canvas,并保证window.Promise可用，不存在时，var htmlCamera = require('html-camera')(Promise);
 > 在支持的打印内容中，打印效果“所见即所打”，无法根据打印纸的大小，自适应打印效果  
 > 常用样式中，border-style只支持solid，由html2canvas决定  

#### htmlCamera(doms, opt) 使用方法
* @param {dom元素} doms 
>  {var} 支持dom，一维dom数组，二维dom数组，三维dom数组  
>    传dom或一维数组时，直接打印；  
>    传二维数组时，数组的第二维度会组合成在一起，以保证其不会分开打印；  
>    传三维数组时，数组的第三维度中的元素，会尽量显示在一行  
* @param {obj} opt 
>  {fn} getImgs dom转图片后回调 return false时，中断后续  
>  {fn} getDataURLs dom转图片base64后回调 return false时，中断后续  
>  {array} split 插入打印分页符的一维dom数组的索引集合  
>  {obj} html2canvasOptions 传html2canvas的参数，详情参考 http://html2canvas.hertzen.com/configuration  
>  {bool} isPrint 是否打印 default: true  
>  {bool} isDebug 是否进入调试模式 defualt: false 是否保留中间过程在页面中生成的元素  
>  {bool} error异常时回调