jsPDF/html2canvas通常会丢失空格和错位文本
jsPDF是一个JavaScript库，用于在客户端生成PDF文件。它提供了丰富的功能，允许开发人员使用HTML和CSS来创建动态和交互式的PDF文档。html2canvas是另一个JavaScript库，可以将HTML元素转换为Canvas对象，从而实现将HTML内容转换为图像的功能。
通常情况下，使用jsPDF和html2canvas生成PDF文档时可能会丢失空格和出现错位文本的问题。这是因为html2canvas在将HTML元素转换为Canvas时可能存在一些渲染上的差异，导致生成的PDF文档与原始HTML内容略有偏差。
为了解决这个问题，可以尝试以下方法：
- 使用空格字符的HTML实体编码：如果空格字符丢失的问题是由于HTML解析器的问题导致的，可以尝试使用空格字符的HTML实体编码( )来替代空格。这样可以确保空格字符在生成的PDF文档中被正确显示。
- 使用CSS样式进行调整：通过调整HTML元素的CSS样式，如设置合适的字体、行高和间距等，可以尝试解决错位文本的问题。通过适当的样式调整，可以确保生成的PDF文档与原始HTML内容的布局一致。
- 调整jsPDF和html2canvas的配置选项：jsPDF和html2canvas提供了一些配置选项，可以根据需要进行调整。通过修改配置选项，如设置合适的分辨率和缩放比例等，可以尝试解决生成PDF时出现的错位和丢失空格问题。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云开发（Serverless Cloud Function）：提供无服务器的计算服务，可用于处理jsPDF和html2canvas的后端逻辑。链接地址：https://cloud.tencent.com/product/scf
- 腾讯云对象存储（COS）：提供可扩展的云存储服务，可用于存储生成的PDF文件。链接地址：https://cloud.tencent.com/product/cos
请注意，以上提到的腾讯云产品仅供参考，并不代表其他厂商的产品，只是为了给出相关的解决方案。在实际使用时，可以根据具体需求选择适合的产品和服务。
相关·内容
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回答
我使用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
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
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
我在一个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
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
回答已采纳
我正在使用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
用画布捕捉的时候有没有办法调整宽度和高度？
<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
使用新的jsPDF .html()很大程度上是直接从他们的文档中提取出来的，但结果仍然是一个空白页面：
空白页面中的结果：
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc.innerHTML, {
浏览 2提问于2019-08-06得票数 8
回答已采纳
2回答
我有一个应该用jsPDF和html2canvas转换成的div文件。问题是输出PDF中的文本是模糊的，边框而不是虚线是实线。有没有办法解决这个问题？
HTML
<button type="button" onclick="download()">Convert to PDF</button>
<br/><br/>
<div id="div1" style="border:1px dashed red;background-color:yellow">
<h4&g
浏览 2提问于2017-11-03得票数 2
1回答
我使用：从服务器端中的html生成pdf。
我已安装下列套件：
"html2canvas": "^1.3.2",
"jspdf": "^2.3.1",
makePdf.ts
const { jsPDF } = require("jspdf");
const doc = new jsPDF();
doc.html('<p>Hola Mundo!</p>');
doc.save("export.pdf");
问题是，我得到一个空白的pdf文件，我不知道如
浏览 0提问于2021-09-01得票数 1
我试图使用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
回答已采纳
我想用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
使用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
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回答
尝试实现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
回答已采纳
1回答
我已经使用html2canvas将特定的<div>标记转换为<canvas>，并且我需要将这个转换后的画布图像与其他JsPdf元素(如Autotables和文本)一起添加。
谢谢。
浏览 0提问于2018-12-18得票数 0
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
在我的reactJS中，我想把我的DOM (和DOM的一部分)转换成DOM。我想要一个可读和可选的PDF，我不想失去我的CSS样式。 我试过这个： const input = document.getElementById('toPdf');
let doc = new jsPDF("portrait", "mm", "a4");
doc.fromHTML(input, 1, 1);
doc.save("myDocument.pdf"); 那很好。它的可读性，多页和文本是可选择的。但它失去了完整的样式。 结果是
浏览 25提问于2019-02-22得票数 0
回答已采纳
我尝试使用jsPDF和html2canvas，它们一起截取网页的屏幕截图并生成一个PDF文件。但我不希望图像是PDF文件。我想要一个库，该库将HTML与CSS的动态结果转换为PDF文件，其中的文本是可选择的。
浏览 22提问于2019-06-05得票数 1
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
回答已采纳
我有一个问题，如图像和文本质量不高，而生成的pdf使用这些库jspdf，html2pdf，pdfmaker，html2canvas。所以，我想知道其他更好的Javascript库来生成pdf。
浏览 23提问于2019-01-18得票数 0
我使用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
使用jspdf和html2canvas拍摄用户在表配置器上选择配置的快照(选择顶部/侧面/层压板颜色)。它是通过使用透明的png改变每个图像的源来实现的。
我有问题把图像插入到pdf中。我可以附加到没有问题的文件和写文本和其他图像到pdf没有问题。恐怕我的形象太大了。生成的base64输出是巨大的。
我让它写在控制台上：
var doc = new jsPDF('p', 'pt','a4',true);
doc.setFontSize(16);
doc.setTextColor(80, 77, 78);
doc.text(15, 2, '
浏览 0提问于2018-04-18得票数 3
回答已采纳
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
我正在使用html2canvas创建图像，并使用jspdf将它们导出到电子文档中的pdf格式。在电子2.0中一切正常，但是当更新到电子6.0时，返回DOM元素的html2canvas的画布对象有更大的比例(宽度和高度)。现在，我必须在生成PDF时(在创建jspdf对象时)通过测试PDF的大小来进行修改。你知道怎么解决这个问题吗？
浏览 2提问于2019-08-24得票数 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
我想用 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
回答已采纳
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
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
我安装了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
我目前正在开发一个学校管理软件，它通常需要导出包含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
回答已采纳
我在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
我有一个html页面，其中包含许多表格中的文本。当单击"generate“按钮时，我使用jspdf版本1.5及更高版本和html2canvas库来创建pdf。
pdf是正确生成的。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template 01</title>
<link id="Bootstr
浏览 7提问于2020-08-24得票数 0
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备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
