jsPDF和html2canvas镜像是否被压缩？
jsPDF和html2canvas是两个常用的前端开发工具，用于生成PDF文档和截取网页内容生成图片。这两个工具本身并不会对镜像进行压缩，但可以通过其他方式对生成的PDF文档或图片进行压缩。
对于生成的PDF文档，可以使用jsPDF提供的压缩选项来减小文件大小。jsPDF支持使用Deflate算法对文档进行压缩，可以通过设置jsPDF.compress=true来启用压缩。压缩后的PDF文档可以减小文件大小，提高传输效率。
对于使用html2canvas生成的图片，可以使用其他工具或库对图片进行压缩。常见的图片压缩方式包括使用图片编码格式（如JPEG）的压缩参数来控制图片质量，或者使用图片压缩算法（如LZ77）来减小文件大小。具体的压缩方法可以根据实际需求和场景选择。
总结起来，jsPDF和html2canvas本身不会对镜像进行压缩，但可以通过其他方式对生成的PDF文档或图片进行压缩，以减小文件大小和提高传输效率。
相关·内容
我在一个Vuejs项目中工作的功能，通过点击一个按钮，用户可以导出一个pdf，其中将包含某些Vuejs组件。在某种程度上一切都很顺利。is安装了两个包，jsPDF和html2canvas (这是一个依赖项)。我将jsPDF添加到组件中，如下所示：
import jsPDF from 'jspdf'
点击按钮时触发的函数为：
exportpdf() {
let pdf = new jsPDF('p', 'px', 'a4')
pdf.addHTML(this.$refs.userinfo, function() {
浏览 2提问于2018-08-09得票数 0
1回答
我正在尝试使用jsPDF动态创建SVG的网页截图，但它不能正确呈现SVG图。
以下是我所做的工作：
function genPDF() {
html2canvas(document.getElementById("full_page"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL("image/png");
var pdf = new jsPDF("p", "mm", "a4
浏览 2提问于2016-12-23得票数 3
2回答
我正在使用html2canvas，但我不知道是否支持SVG。我尝试了以下方法，并在html文档中添加了SVG标记，但该数据不会转换为canvas。图像和CSS被转换。
<head>
<title>jsPDF</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery/jquery-1.7
浏览 1提问于2014-05-16得票数 0
3回答
我正在尝试将jsPDF和html2canvas与es6结合使用。
我正在导入html2canvas和jsPDF，但是当我注释掉addHTML时，会在addHTML上得到一个错误，生成addHTML。
有什么线索吗？
谢谢。
jspdf.debug.js:3754Uncaught错误:您需要或(…)jsPDFAPI.addHTML @jspdf.debug.js:3754(匿名函数)@index.js:12(匿名函数)@bundle.js?V1.27.2:31546(匿名函数)@ bundle.js?V1.27.2:31547__webpack_require__ @bootstraf7845
浏览 3提问于2016-11-20得票数 4
我试图使用jspdf和html2canvas将HTML转换成PDF格式。问题是，我没有得到一个直接的方式来避免不必要的HTML元素在PDF中。
HTML代码
<button (click)="ConvertToHtml()">Generate PDF</button>
<div id="MainSegment">
<div id="Div1">
test 1
</div>
<div id="Unwanted">
Unwanted s
浏览 3提问于2021-05-22得票数 0
回答已采纳
1回答
什么是最好的HTML到PDF转换器角6？我试过用
jspdf
随同
html2canvas
但是它完全破坏了HTML的设计。
请检查我的密码如下-
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
html2canvas(document.getElementById('documentToPrint')).then(canvas => {
var imgWidth = 208;
var pageHeigh
浏览 0提问于2019-04-17得票数 0
1回答
尝试实现here所做的一切。唯一的问题是我下载的pdf图片被粗暴的裁剪了： ? 我深入研究了html2canvas方法并捕获了导致问题的jspdf， 那么如何使用html2canvas将svg强制更改为png呢？ 组件： import PrintButton from "../../../components/print/print";
function QrcodeComponent(props) {
return (
<>
<div id={"barcodeCont"}>
<QRC
浏览 11提问于2020-08-23得票数 1
回答已采纳
使用html2canvas和JsPDF将HTML转换为pdf，并使用下面的代码生成代码，这段代码将将div的完整HTML转换为单个图像，并将在pdf中显示为单个页面。
import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
htmltoPDF()
{
// parentdiv is the html element which has to be converted to PDF
html2canvas(document.que
浏览 2提问于2020-10-13得票数 2
2回答
在2页pdf的第1页获取图像
、、、、
我正在用html2canvas和jsPDF与Angular4创建一个图像。我想把这张图片放在第1页的2页生成的pdf。
但似乎这条线，
doc.save('test.pdf');
需要在htm2canvas()之后的函数中。因为如果我把它放在外面，它将不包括在pdf中的图像。
generatePDF(){
var doc = new jsPDF();
doc.text(50,90,this.problems.length.toString());
doc.text(50,100,'page 1')
doc.add
浏览 2提问于2017-09-18得票数 2
回答已采纳
我使用html2canvas和jspdf包下载一个简单的组件，但是当我单击“下载”时，我得到一个没有任何内容的空白pdf页面，屏幕上没有错误，这是我的代码：
import React, {Component, PropTypes} from 'react';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import Pie from './Pie.js';
class Qu extends Component {
constructor(
浏览 4提问于2020-11-15得票数 0
回答已采纳
我尝试在我的Vue CLI应用程序中集成jsPDF和html2canvas，但它不起作用……我的灵感来自互联网上的一个例子，但我的控制台返回"Object(...) is not a function“
以下是我的代码
<template>
<div>
<div ref="pdf">
Content
</div>
<button @click="download">Download PDF</button&g
浏览 2提问于2020-09-08得票数 1
4回答
角2-进口html2canvas
、、、、
我已经使用html2canvas在angular 2项目上安装了npm install html2canvas --save。如果我现在转到任何文件并写入import * as html2canvas from 'html2canvas'，则会出现以下错误：
Cannot find module 'html2canvas'
我的包文件如下所示：
{
...
"scripts": {
...
},
"dependencies": {
...
"html2canvas":
浏览 2提问于2017-04-07得票数 4
回答已采纳
用画布捕捉的时候有没有办法调整宽度和高度？
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function demoFromHTML() {
浏览 21提问于2017-06-28得票数 0
我正在使用react，我试图用html2canvas和jspdf制作一个pdf。我想给我现在制作的html2canvas a提供输入。当我试图制作pdf时，我会得到以下错误：
index.ts:36 Uncaught (in promise) Error: Element is not attached to a Document
以下是代码：
const input = (<div><h2>Test</h2></div>);
html2canvas(input).then((canvas)=>{
const imgData = c
浏览 14提问于2021-12-27得票数 0
我在我的Reactjs项目中使用了html2canvas和jsPDF，并且我有一个要求，那就是将DOM节点导出到PDF文件。当我导出的时候，HTML和CSS被保留了下来，只是SVG不能。我不知道为什么。在客户端上有另一个包可以帮助我吗？感谢您的关照。下面是我要导出的代码
const filename = 'TyVan.pdf';
html2canvas(document.querySelector('#buivanty'),{scale: quality}).then(canvas => {
let pdf = new jsPDF(
浏览 3提问于2018-11-08得票数 1
1回答
我使用jsPDF和html2canvas包来保存来自HTML文件。 我的问题是内容是动态的，我不知道每个页面什么时候结束。 我使用此函数创建PDF并将内容拆分为多个页面。 但有时文本行可以分成两页。我如何防止这种情况发生？ import { Injectable } from '@angular/core';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
createpdf() {
var data = document.getElementById(
浏览 42提问于2019-12-19得票数 3
我正在使用html2canvers库创建发票并下载为PDF(A4大小PDF)。下载的文件大小总是很大(7MB -13 7MB)。是否有办法减少文件大小和保持PDF的质量。
public downloadPDF(order_id: string): void {
html2canvas(this.invoicepdf.nativeElement).then(function (canvas) {
var wid: number
var hgt: number
var img = ca
浏览 0提问于2018-07-18得票数 1
回答已采纳
1回答
问题是客户端下载转换后的PDF。我需要的PDF被保存在服务器端，并通过邮件发送。我正在使用jsPDF和html2canvas来转换HTML到PDF。
浏览 19提问于2020-01-02得票数 0
9回答
我使用jsPDF，它使用html2canvas从某个html元素生成一个图像并插入到.pdf文件中。但是html2canvas上有一个问题，它从html生成模糊的图像。见下面的例子：
HTML内容：
html2canvas生成的图像：
是否有任何方法来修复它，或者是否有更好的选择来获得图像格式html？
谢谢!
浏览 4提问于2014-04-02得票数 31
回答已采纳
我想用html2canvas和JsPDF将整页保存为pdf。我尝试过的方法似乎都不起作用。
html2canvas(document.body, {
allowTaint: true,
onrendered: function(canvas) {
var image = canvas.toDataURL('image/png');
var pdf = new jsPDF();
pdf.addImage(image, 'JPEG', 0, 0);
浏览 13提问于2017-08-04得票数 1
6回答
对于我正在进行的项目，我需要能够生成用户当前正在进行的页面的PDF格式，为此我将使用jspdf。因为我有一个HTML，我需要用它生成一个PDF，所以我需要addHTML()函数。关于这件事有很多话题，说
您需要使用html2canvas或rasterizehtml。
我选择使用html2canvas。目前，我的代码就是这样的：
import { Injectable, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as d3 f
浏览 8提问于2017-04-07得票数 12
回答已采纳
我在使用html2canvas和jsPDF。该代码适用于Chrome和Edge，但不适用于IE11。
第一个img是我想要的，第二个是IE生成的。
代码：
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" ></script>
<script type="text/javascript" src="https://html2canvas
浏览 16提问于2020-02-26得票数 0
回答已采纳
我试着用html2canvas和jspdf下载网页为pdf。页面的所有元素，如单选按钮、复选框和标签都呈现得很好。但是如果我通过iframe将嵌入的视频添加到页面中，它根本就不会呈现。有什么方法可以通过html2canvas和jspdf将嵌入的视频渲染成pdf吗？谢谢。
这是要呈现的网页的截图。
这是下载的pdf之一。
浏览 2提问于2016-09-29得票数 2
回答已采纳
1回答
我有一个画布，它显示了很多东西，但上面也有很多html元素。
当我尝试将html2canvas lib与jsPdf一起使用时，我的pdf中根本没有html元素，只有几个元素。
以下是代码：
html2canvas(document.body).then((canvas) => {
const imgData = canvas.toDataUrl('image/png');
const imgWidth = (canvas.width * 20) / 120;
const imgHeight = (canvas.height * 20) / 120;
const p
浏览 7提问于2022-11-09得票数 0
我正在尝试获取表的快照，并在React中使用html2canvas和jsPDF生成pdf。但是isssue只是表格中可见的部分，当表格中不可见的水平和垂直滚动部分不在pdf中时，才会生成。对这个问题的任何帮助都是非常感谢的。提前谢谢。
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
浏览 11提问于2021-08-05得票数 0
3回答
当我运行应用程序并单击按钮时，PDF显示为空。 我正在寻找console.log()的作品，但画布上没有显示任何内容。 import { Component, OnInit } from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
generatePDF(){
html2canvas(document.getElementById('albaran')).then(canvas
浏览 62提问于2019-06-02得票数 1
回答已采纳
我使用html2canvas和jspdf导出多页网页到pdf。但是，在生成的pdf中没有边距。如何使用html2canvas或jspdf添加边距。
html2canvas(document.body, {
scale: 0.8,
logging: true,
allowTaint: false,
backgroundColor: null
}).then(function(canvas) {
// Export the canvas to its data URI representation
var base64image = canvas.t
浏览 1提问于2019-08-06得票数 1
1回答
我正在创建一个反应生成pdf当用户点击按钮，我有五个页面的html组件，我不需要显示的组件浏览器，我只想显示在pdf中，请帮助和搜索很多但我的厄运，任何链接，想法它对我很有用 import { useRef } from "react";
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";
import Document from "./Doocument"
const App = () => {
const inputRef
浏览 46提问于2021-07-30得票数 0
我正在使用html2canvas创建图像，并使用jspdf将它们导出到电子文档中的pdf格式。在电子2.0中一切正常，但是当更新到电子6.0时，返回DOM元素的html2canvas的画布对象有更大的比例(宽度和高度)。现在，我必须在生成PDF时(在创建jspdf对象时)通过测试PDF的大小来进行修改。你知道怎么解决这个问题吗？
浏览 2提问于2019-08-24得票数 0
downloadPdf() {
var element = document.querySelector('.myTable');
html2canvas(document.querySelector('.myTable')).then((canvas) => {
var imgData = canvas.toDataURL('image/jpeg', 1.0);
var doc = new jspdf.jsPDF('p', 'pt', [canvas
浏览 7提问于2022-04-05得票数 0
我正在使用npm和parcel来构建一个web应用程序。dist文件被复制到apache2服务器(因此不是在节点服务器下运行)，并且在尝试使用jsPDF生成dist文件时，我得到了这个错误： 未捕获(在承诺中)错误:无法加载dompurify:错误:无法找到模块'dompurify‘ 我认为这是一个问题，“当需要时(使用各自的模块格式，例如动态导入)，sPDF将动态加载它们(即: dompurify和html2canvas)。”但我不知道如何解决这个问题。 我已经安装了: npm install --save jspdf dompurify html2canvas 在我的JS中，我“
浏览 56提问于2020-08-24得票数 4
回答已采纳
1回答
我正在尝试使用Html2Canvas与jsPDF一起从html生成pdf。将我正在关注的存档。
我正在尝试渲染一个简单的Hello World h1，实际上我得到了pdf和Hello World，但为了拉伸，我不知道如何更改它才能正确显示，你可以看到下面的图像：
我已经尝试将PDF对象的配置更改为如下所示：pdf.internal.scaleFactor = 2.25;
但这似乎并没有改变什么，我还尝试了其他一些配置更改，但没有成功。
<template>
<div>
<a @click="print">Print<
浏览 1提问于2019-04-03得票数 3
我已经看过jsPDF了，但是这个插件在导出的文档中出现了CSS。我也看过html2canvas，但这是当前窗口的屏幕截图。我的HTML内容对用户是隐藏的，我正在寻找一个解决方案，将创建一个从HTML块在飞行中的PDF。有什么建议吗？
编辑:我刚刚尝试创建html2canvas到jsPDF，但我得到一个空的pdf文档。有人能告诉我为什么吗？
$('.download').on('click', function(){
html2canvas($('.print'), {
onrendered: function(canvas) {
浏览 2提问于2016-09-16得票数 1
2回答
如何正确地从复杂的svg生成画布
、、、、
我正在尝试从我的网站导出一个复杂的svg块(用c3生成)作为一个图像(不管是png、SVG、pdf，此时我对任何解决它的方法都是开放的，尽管向量格式是理想的)。我试过html2canvas，拉普，jsPDF，还有那个团伙里所有的酷孩子。问题是:我的一个阴谋搞砸了。线变成面积，区域被颠倒，颜色被破坏，.你说吧。
我是，与js专家相去甚远。我刚到这里，我正在四处寻找路，有些人请容忍我。
我不知道这是否是CSS问题什么的。是的，我们在html后面有CSS。
我的临时解决方案是使用jQuery.print.js调用div的打印。由于许多原因，这是远远不理想的：
没有bbox。它生成由用户定义的页面
浏览 2提问于2018-06-07得票数 6
回答已采纳
5回答
无法安装jspdf 1.5.3
、、、、
我需要将html转换为pdf，我使用的是jspdf 1.5.2。它显示错误无法读取未定义(使用with html2canvas)的属性'charAt‘。
当我尝试安装jspdf 1.5.3时，得到的结果是：
npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://git@github.com/el
浏览 2提问于2019-06-04得票数 6
我想用 jsPDF.html 要将html页面转换为pdf，我使用以下代码： savePdf () {
var pdf = new jsPDF({unit: 'mm', format: 'a4', orientation: 'portrait' })
pdf.html(document.getElementById('printable-cv'), {
callback: function (pdf) {
pdf.save('cv-a4.pdf');
}
})
} 但是我得
浏览 99提问于2019-01-10得票数 11
回答已采纳
我有一个非常简单的svg
<div id="printId">
test
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
并试图用html2canvas和jspdf打印它。但无论我做什么我都会犯错
Error loading svg data:image/svg+xml,%3Csvg%20x
浏览 4提问于2021-10-08得票数 0
回答已采纳
1回答
我正在使用jspdf和canvas在我的页面中下载特定的div格式为pdf，但它需要2到3秒，我的客户希望它下载速度快，有没有办法加快这个过程，或减少文件大小，因为它是8MB，但是？ 代码 $('#print').click(function (e) {
e.preventDefault();
let HTML_Width = $(".report").width();
let HTML_Height = $(".report").height();
let top_left_margin = 1;
let PDF_Width = HTML_
浏览 101提问于2021-10-15得票数 0
2回答
我希望能够导出反应页PDF文件(S)。到目前为止，我已经尝试过jsPDF和html2canvas将页面捕获为图像，并将其保存为pdf。样本代码：
const input = document.getElementById('exportToPDF')
window.scrollTo(0,0)
html2canvas(input)
.then((canvas) => {
document.body.appendChild(canvas)
const imgData = canvas.toDataURL('i
浏览 25提问于2021-05-18得票数 1
我安装了jsPDF、html2canvas，并导入了组件中的那些库。
单击按钮时，它会触发一个函数，该函数应该将html文件导出到PDF文件。但这是行不通的。
此外，如何使用jsPDF加载包含从API获得的动态数据的html文件，并将其下载到PDF文件中？
这是代码：- jspdf.component.html
<div id="content" #content>
<div class="alert alert-info">
<strong>Html To PDF Conversion - Angular 7.2</
浏览 1提问于2019-06-04得票数 2
我在angular5上构建应用程序，并尝试使用jspdf.addHTML()函数结合html2canvas添加一个html。
const content = this.vc_print_section.nativeElement;
html2canvas(content).then(canvas => {
const doc = new jsPDF('p', 'mm');
doc.addHTML(canvas, _ => {
doc.save('test.pdf');
});
});
但是发生了一个错
浏览 131提问于2018-05-03得票数 1
1回答
我正在使用jsPDF和Angularjs，并试图创建更多的页面。当当前页被填充时，我想添加一个新页面。
代码：
$scope.goPdf = function ()
{
console.log('Create PDF');
$('#pdf').css('background', '#fff');
$('#pdf').css('font-size', '20px');
$(".sleep").attr("hidden",
浏览 0提问于2018-11-07得票数 0
我目前正在开发一个学校管理软件，它通常需要导出包含data tables和div tag的html内容。
我已经尝试了所有可能的方法来编写一个代码，它可以很好地导出我的html数据，最好是用css。在这里检查了一些问题和答案后，我尝试使用spdf，但没有运气。
它不断地破坏我的表对齐，然后我读到了关于html2canvas的文章，但是用jspdf实现它是我的问题，如果带有html2canvas的div标记然后将画布发送到jspdf以pdf格式导出画布的话，我想捕获内容。
下面是我的代码：
<script src="assets/js/pdfconvert/jspdf.js"
浏览 9提问于2014-10-21得票数 21
回答已采纳
1回答
将网页转换为具有样式的pdf格式
、、、、
我想将网页转换成PDF格式，包括我添加的所有样式。我用过jspdf.js和html2Canvas。但我只有一张PDF格式的模糊照片。我搜索了许多JavaScript代码，但没有找到正确的代码。
我写的剧本是：
function getPDF() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("Image/jpeg");
//window.open(img);
var doc = new jsPDF
浏览 2提问于2016-05-13得票数 2
回答已采纳
1回答
我用Html2canvas和jspdf制作了一个网页的pdf。为什么jspdf制作质量不好的pdf，我怎么才能修复它？这对我来说太重要了！有没有一些选项可以添加到addImage()来修复它？或者别的什么.！
浏览 0提问于2018-05-27得票数 0
我在升级一个使用旧版本jsPDF (1.x)到最新版本(2.5.1)的网站时遇到了问题。
我们使用.html()将HTML呈现给PDF
我们得到的一个问题是，每当遇到jpeg文件时，它就会失败，出现“错误加载图像”或“错误加载背景图像”。
如果我将正在加载到PNG中的映像更改为PNG，它将很好地加载。
这是我能用最简单的形式来讨论的问题。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js">&l
浏览 8提问于2022-05-24得票数 1
在我的HTML页面中，有2个diff图表可用，这是我将整个页面转换为图像并使用jspdf保存为pdf后的方式。我需要设置页眉或页脚之前，它在html2Canvas和jspdf更新。但是如何在pdf中添加页眉和页脚呢？
浏览 1提问于2019-08-14得票数 0
我有一个情况，我在网页上生成几个图表，并在画布上显示它们，我的要求是，在点击下载按钮，我应该能够导出所有帆布图像到pdf。
我已经成功地使用、html2canvas、和Jspdf对单个画布元素执行了此操作，但无法确定如何对所有人进行相同的操作。
我按照这个JSFiddle代码从Html2canvas和jspdf生成pdf。
$(document).ready(function() {
var d_canvas = document.getElementById('canvas');
var context = d_canvas.getContext(&
浏览 4提问于2015-06-09得票数 3
1回答
我正在调整以生成仅包含div内容的PDF (可以有图像)
我正在尝试HTML和->
这可以帮助和
这是我的代码：
$("#pdfButton").click(function(){
$(".compare_wrapper").clone().appendTo("#printDiv");
var pdf = new jsPDF('l', 'pt', 'a4');
var options = {
pagesplit: true
};
pdf.addHTML($(&#
浏览 4提问于2016-10-12得票数 0
3回答
所以我有一个项目，用户可以根据他们的输入生成一个pdf。使用jspdf库生成PDF文件。问题是，用户可以上传配置文件图片，我想用圆角或全圆角显示该图像( border-radius为50%)。由于在jspdf或我所知道的任何其他库(pfdkit，pdfmake)中没有一个本机函数允许这样做，所以在生成pdf之前，我正在寻找一种修改映像的方法。
我已经试过使用html2canvas了，实际上效果很好。当用户处于移动状态时，html2canvas就会出现问题。由于图像的width和height被调整到屏幕大小(两者都围绕着35px)，用html2canvas拍摄快照，然后在一个宽度和高度为100
浏览 2提问于2019-11-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
