使用html2canvas截图并用jspdf打印的问题

最新推荐文章于 2023-08-14 10:28:21 发布
最新推荐文章于 2023-08-14 10:28:21 发布
阅读量309 收藏
点赞数
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/xiao1993/p/10297672.html
版权

之前的方案确实可以打印出a4的大小的pdf,但是也呈现了诸多问题,因为这种方法是截图然后再进行打印的,所以打印出来的效果是模糊的,思前想后决定放弃了这种方式.

最终还是决定使用浏览器自带的打印方法.

设置打印按钮

添加打印事件

 去除不需要打印的部分

这样打印文件所呈现的效果就截然不同,清晰度得到很大改善.

然后再为页面设置背景图以及贴图

 

转载于:https://www.cnblogs.com/xiao1993/p/10297672.html

weixin_30675967
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案
11-20
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案，设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是从这里开始截断，...
html2Canvas 图片不打印的问题
sdyin的博客
09-06 727
html2Canvas 打印DOM中有图片无法打印的问题处理
使用printJS、html2Canvas实现打印功能
lvfeifeiCSND的博客
07-10 804
【代码】使用printJS、html2Canvas实现打印功能。
Vue: 使用html2canvas和print-js打印组件
qq_43340606的博客
08-14 1216
由于受网络传输速度的影响，web上使用的图片都是72dpi，照片使用300dpi或者更高350dpi，会很清晰。dpi:DPI是指某些设备分辨率的度量单位。DPI越低，扫描的清晰度越低，DPI越高，清晰度越高。场景: 需要将页面的局部信息打印出来，只在前端实现，不要占用后端的资源。解决: 使用html2canvas@^1.0.0的版本。解决后的效果: 完美, 并且多余的内容会自动生成到第二页中。3. 打印出现空白页, 且没有去除页眉和页脚。解决: 设置打印时的样式。解决: 利用增大dpi。
前台导出pdf经验汇总 （html2canvas.js和浏览器自带的打印功能-print.js）以及后台一些导出pdf的方法
Schaffer的博客
11-27 5189
项目导出pdf前台导出pdf的两种方式html2canvas.js & pdf.js简介使用问题及解决方法浏览器自带的打印功能 & print.js简介使用问题及解决方法后台输出pdf利用iText导出 前台导出pdf的两种方式 html2canvas.js & pdf.js 简介 我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。 由于html2
如何使用jspdf+html2canvas实现pdf预览打印
weixin_46084072的博客
07-22 1184
同名类可以使用uuidv4()生成唯一id添加到类名中方便获取，对于v-for循环的数据,需要计算高度的每个循环项需要添加唯一id。注：在转换过程中可能出现内容重叠之类的原因，这个需要对翻页高度或者转换html2canvas每页的高度进行调试。
jsPDF-html2canvas:与jsPDF和html2canvas结合使用，可将html内容转换为PDF文件
05-16
与jsPDF和html2canvas结合使用，可将html内容转换为PDF文件。 html2PDF函数将自动将目标dom宽度调整为PDF大小。 因此，无需担心溢出部分。 如果内容高度超过1 pdf，它将自动将其分隔到另一个pdf页面。 安装 npm i...
html2canvas截图空白问题的解决
11-21
最近在项目中遇到一个需求，需要提供网页截图的功能。百度下发现html2canvas很好用。那就试试吧。 资源下载地址 插件下载地址：html2canvas下载地址 使用方式 项目使用的react组件开发方式。参照官方的说明文档...
html2canvas.js 和jsPdf.debug.js下载.rar
02-23
jsPdf.debug.js和html2canvas.js下载jsPdf.debug.js和html2canvas.js下载jsPdf.debug.js和html2canvas.js下载jsPdf.debug.js和html2canvas.js下载
html2canvas.js 和jsPdf.debug.js
09-07
运用jquery将html转换为pdf所用到的插件。 jspdf.debug.js和html2canvas.js
JSPDF(解决了全页面截图文图)
01-02
JSPDF(解决了全页面截图文图)，亲测可用。大家可以放心下载
Html转pdf 页面直接完成 无需后台 html2canvas+ jsPdf
09-28
html2canvas jsPdf html页面截图保存pdf，由于表格线问题，所以在里面进行替换，无需后台操作，不过有问题的是如果多页那么抓取也的div标签内容过多，不好进行分页处理，效果一般
前端项目实战126-html2canvas 进行打印
qq_41632427的博客
10-23 1023
前端
html2canvas截图打印
我的秘密花园
12-04 2632
import printJS from 'print-js'; import html2canvas from 'html2canvas'; export const mapPrint = { defaultDomId: "printDiv", print(domId) { const that = this; if (!domId) { domId = that.defaultDomId; } .
Vue（十七）：利用 html2canvas、JsPDF 依赖实现打印功能
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
04-18 815
利用 html2canvas、JsPDF 依赖实现打印功能
html2canvas jsPDF react实现滚动页面的打印功能 高清
muge1161105403的博客
07-23 1799
1.首先需要个库 import html2canvas from 'html2canvas' 2.封装 /* 打印封装 id:dom的ID选择器 */ export const handlePrint = (id: any) => { // 先用html2canvas将页面整个转为一张截图，再打印，防止出现echarts无法打印 const dom = document.getElementById(id) as any; html2canvas(dom, { scale: 2
react-js 创建pdf 下载并打印
wangshang1320的博客
05-12 2479
1.下载 npm install jspdf --save npm install html2canvas --save 2.使用 index.js import JsPDF from 'jspdf'; import React, {createRef} from 'react'; import JsPDF from 'jspdf'; import html2Canvas from 'html2canvas'; import dayjs from 'dayjs'; import {Butt
HTML生成固定宽高图片并打印（所用插件html2canvas、print-js）
weixin_40466351的博客
04-20 2552
1、mm转px，生成图片的固定宽高 //获取设备dpi（分辨率） getDPI() { var arrDPI = new Array(); if (window.screen.deviceXDPI != undefined) { arrDPI[0] = window.screen.deviceXDPI; arrDPI[1] = window.screen.deviceYDPI; } else { var tmpNode =
vue 使用html2canvas和print.js实现前端打印功能，并自适应所有纸张
李菇凉的博客
09-16 4870
一开始用print.js打印包含canvas的dom，后来，查了资料，对print.js修改后，可以很好的解决了问题，但是没有自适应打印纸张。没办法，那就自己改一下吧。 基本print.js的基础上将代码进行修改，将需要打印的dom转为图片后，调用print.js将图片进行打印。 import html2canvas from "html2canvas" // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options)
vue使用html2canvas jspdf导出pdf
最新发布
10-29
Vue使用html2canvas和jsPDF可以实现将网页内容导出为PDF文件的功能。具体步骤如下： 1.安装html2canvas和jsPDF库，可以使用npm或yarn进行安装。 2.在需要导出PDF的组件中引入html2canvas和jsPDF库。 3.封装一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值