Есть ли способ решить это? Я попытался установить ширину и высоту в мм. Как установить его на полную ширину?
Как установить изображение в соответствии с шириной страницы с помощью jsPDF?
Ответ 1
Вы можете получить ширину и высоту PDF документа, как показано ниже,
var doc = new jsPDF("p", "mm", "a4");
var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
Затем вы можете использовать эту ширину и высоту для вашего изображения, чтобы соответствовать всему документу PDF.
var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJ......';
doc.addImage(imgData, 'JPEG', 0, 0, width, height);
Убедитесь, что ваше изображение имеет тот же размер (разрешение) документа PDF. В противном случае это будет выглядеть искаженным (растянутым).
Если вы хотите конвертировать px в mm используйте эту ссылку http://www.endmemo.com/sconvert/millimeterpixel.php
Ответ 2
API изменился с момента его совершения, используя версию 1.4.1.
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
Ответ 3
Мой ответ посвящен более конкретному случаю того, что вы спрашиваете, но я думаю, что из этого можно извлечь некоторые идеи для более общего применения. Кроме того, я бы опубликовал это как комментарий к ответу Пурушота (на котором основан мой), если бы я только мог.
Итак, моя проблема заключалась в том, как вписать веб-страницу в документ PDF, не теряя при этом пропорции. Я использовал jsPDF в сочетании с html2canvas и вычислил соотношение по ширине и высоте div. Я применил такое же соотношение к PDF-документу, и страница отлично вписалась в страницу без каких-либо искажений.
var divHeight = $('#div_id').height();
var divWidth = $('#div_id').width();
var ratio = divHeight / divWidth;
html2canvas(document.getElementById("div_id"), {
height: divHeight,
width: divWidth,
onrendered: function(canvas) {
var image = canvas.toDataURL("image/jpeg");
var doc = new jsPDF(); // using defaults: orientation=portrait, unit=mm, size=A4
var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
height = ratio * width;
doc.addImage(image, 'JPEG', 0, 0, width-20, height-10);
doc.save('myPage.pdf'); //Download the rendered PDF.
}
});
Ответ 4
Я обнаружил это, экспериментируя с html2canvas этим утром. Хотя это не включает положения для печати нескольких страниц, оно масштабирует изображение до ширины страницы и перераспределяет высоту по отношению к отрегулированной ширине:
html2canvas(document.getElementById('testdiv')).then(function(canvas){
var wid: number
var hgt: number
var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height);
var hratio = hgt/wid
var doc = new jsPDF('p','pt','a4');
var width = doc.internal.pageSize.width;
var height = width * hratio
doc.addImage(img,'JPEG',20,20, width, height);
doc.save('Test.pdf');
});
Ответ 5
я столкнулся с той же проблемой, но я решаю, используя этот код
html2canvas(body,{
onrendered:function(canvas){
var pdf=new jsPDF("p", "mm", "a4");
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
pdf.addImage(canvas, 'JPEG', 0, 0,width,height);
pdf.save('test11.pdf');
}
})
Ответ 6
Лучшим решением является установка ширины и высоты документа с использованием соотношения сторон вашего изображения.
var ExportModule = {
pxTomm: function() {
return Math.floor(px / $('#my_mm').height());
},
ExportToPDF: function() {
var myCanvas = document.getElementById("exportToPDF");
html2canvas(myCanvas, {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/jpeg', 1.0);
//Get the original size of canvas/image
var img_w = canvas.width;
var img_h = canvas.height;
//Convert to mm
var doc_w = ExportModule.pxTomm(img_w);
var doc_h = ExportModule.pxTomm(img_h);
//Set doc size
var doc = new jsPDF('l', 'mm', [doc_w, doc_h]);
//set image height similar to doc size
doc.addImage(imgData, 'JPG', 0, 0, doc_w, doc_h);
var currentTime = new Date();
doc.save('Dashboard_' + currentTime + '.pdf');
}
});
},
}<script src="Scripts/html2canvas.js"></script>
<script src="Scripts/jsPDF/jsPDF.js"></script>
<script src="Scripts/jsPDF/plugins/canvas.js"></script>
<script src="Scripts/jsPDF/plugins/addimage.js"></script>
<script src="Scripts/jsPDF/plugins/fileSaver.js"></script>
<div id="my_mm" style="height: 1mm; display: none"></div>
<div id="exportToPDF">
Your html here.
</div>
<button id="export_btn" onclick="ExportModule.ExportToPDF();">Export</button>Ответ 7
Ключ заключается в том, чтобы рассчитать соотношение сторон изображения и относительное соотношение ширины/высоты страницы. Следующий код - это то, что я использовал для преобразования нескольких изображений онлайн в файл PDF. Он будет вращать изображения в зависимости от ориентации изображений/страницы и устанавливать правильное поле. По какой-то причине в функции img.onload i не увеличивается автоматически, а равно urls.length. Буду признателен, если вы придумаете объяснение. Мой проект использовать изображения с онлайн-src. Вы должны быть в состоянии изменить в соответствии с вашими потребностями.
Что касается поворота изображения, если вы видите пустую страницу после поворота, это может быть просто за пределами изображения. Смотрите этот ответ для деталей.
function exportPdf(urls) {
let pdf = new jsPDF('l', 'mm', 'a4');
const pageWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
const pageRatio = pageWidth / pageHeight;
for (let i = 0; i < urls.length; i++) {
let img = new Image();
let j = i;
img.src = urls[i];
img.onload = function () {
const imgWidth = this.width;
const imgHeight = this.height;
const imgRatio = imgWidth / imgHeight;
if (j > 0) { pdf.addPage(); }
pdf.setPage(j + 1);
if (imgRatio >= 1) {
const wc = imgWidth / pageWidth;
if (imgRatio >= pageRatio) {
pdf.addImage(img, 'JPEG', 0, (pageHeight - imgHeight / wc) / 2, pageWidth, imgHeight / wc, null, 'NONE');
}
else {
const pi = pageRatio / imgRatio;
pdf.addImage(img, 'JPEG', (pageWidth - pageWidth / pi) / 2, 0, pageWidth / pi, (imgHeight / pi) / wc, null, 'NONE');
}
}
else {
const wc = imgWidth / pageHeight;
if (1 / imgRatio > pageRatio) {
const ip = (1 / imgRatio) / pageRatio;
const margin = (pageHeight - ((imgHeight / ip) / wc)) / 4; // why not 2?
pdf.addImage(img, 'JPEG', (pageWidth - (imgHeight / ip) / wc) / 2, -(((imgHeight / ip) / wc) + margin), pageHeight / ip, (imgHeight / ip) / wc, null, 'NONE', -90);
}
else {
pdf.addImage(img, 'JPEG', (pageWidth - imgHeight / wc) / 2, -(imgHeight / wc), pageHeight, imgHeight / wc, null, 'NONE', -90);
}
}
if (j == urls.length - 1) {
pdf.save('Photo.pdf');
}
}
}
}