0
저는 PDF 파일로 내용을 내보내는 jsPDF API로 angularjs 응용 프로그램을 작성하고 있습니다. 아래의 데모 링크에서 볼 수 있듯이 텍스트가 오랫동안 완전한 문장이 생성 된 PDF에 표시되지 않을 때 텍스트가 PDF에 표시 될 때 문제가 발생합니다. 모든 내용이 PDF 파일에 표시되도록 줄 바꾸기를 적용하고 싶습니다.은 긴 동적 텍스트에 대해 줄 바꿈을 적용합니다.
여기 온라인 데모 확인 : https://plnkr.co/edit/w7fZsdFbbRYctK5tWv5u?p=preview
코드 데모 : 나는 API를 확인하신 후, 여기에 Word wrap in generated PDF (using jsPDF)?를 표시하지만, 같은 splitTextToSize (..)이있다
var app = angular.module("app", []);
app.controller("myController", ["$scope",
function($scope) {
$scope.export = function() {
// var pdf = new jsPDF('landscape');
var pdf = new jsPDF('p','pt','a4');
var pdfName = 'test.pdf';
var options = { pagesplit: true};
var $divs = $('.myDivClass')
var totalDiv = $divs.length -1;
var currentRecursion=0;
function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
//Once we have done all the divs save the pdf
if(currentRecursion==totalRecursions){
pdf.save(pdfName);
}else{
currentRecursion++;
pdf.addPage();
pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
});
}
}
pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, totalDiv);
});
}
}
]);<!doctype html>
<html ng-app="app">
<head>
<link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.33/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<button ng-click="export()">Export</button>
<div class="myDivClass" style="background-color:white">
The identity of the longest word in English depends upon the definition of what constitutes a word in the English language, as well as how length should be compared. In addition to words derived naturally from the language's roots (without any known intentional invention), English allows new words to be formed by coinage and construction; place names may be considered words; technical terms may be arbitrarily long. Length may be understood in terms of orthography and number of written letters, or (less commonly)
</div></div>
</body>
</html>을 내 기존 코드에서 동일하게 적용하기가 혼란 스럽습니다. 위에서 js 코드를 볼 수있는 것처럼 보입니다. $scope.export div를 반복하여 동적 데이터를 가져오고 t 암탉은 pdf.save(pdfName)이라고 불렀습니다. 누구든지 솔루션을 제공 할 수 있습니까? 온라인 데모 링크도 공유됩니다.
추신 : 내 div (myDivClass)에 텍스트, 이미지 및 기타 HTML 태그가있을 수 있습니다.
필요 jspdf, 당신은 HTML2PDF를 사용할 수 있습니다 사용하는 당신을 위해 일을 할 것입니다
, 그것은 –
네 jsPDF fromHTML() 메소드를 사용할 필요도 addHTML를 보라 jsPDF의() 메소드에는 많은 단점이 있으므로 사용할 수 없습니다. html2PDF를 이미 시도했지만 자체적 인 단점이 있습니다. jsPDF fromHTML()을 사용하여 생성 된 html2PDF와 비교 된 PDF의 품질이 좋지 않아 css 요소를 거의 인식하지 못합니다. jsPDF fromHTML()은 splitTextToSize (..)를 사용하여 단어 랩을 지원하지만 기존 코드에 적용하는 방법을 알 수 없었습니다. 모든 입력 사항은 무엇입니까? @ Sagar Bhattacharya – user7833845
확인해 주셔야합니다. –