html2pdf将图像拟合成pdf
我终于让我的html2pdf工作，显示我的网页，我希望它是如何在pdf(任何其他大小显示不正确，所以我一直调整格式大小，直到它完全适合)，最终的结果是我希望它看起来像.除了我的纵横比对一个景观是正确的，它仍然使用一个非常大的图像和pdf不是标准的字母大小(或a4 )，这是我设定的大小。这使得一个更大的pdf比必要和打印不好，除非我们调整它的打印机。我基本上想要这个确切的图像，只是转换成一个a4或字母大小，以形成一个较小的pdf。如果我不使用我设定的尺寸，那么东西就会被切断。
无论如何，采取这一pdf，是生成和调整大小为一个a4大小(仍然适合的图像)。我尝试的每一件事都不起作用，我觉得我错过了一些简单的东西。
const el = document.getElementById("test);
var opt = {
margin: [10, 10, 10, 10],
filename: label,
image: { type: "jpeg", quality: 0.98 },
//pagebreak: { mode: ["avoid-all", "css"], after: ".newPage" },
pagebreak: {
mode: ["css"],
avoid: ["tr"],
// mode: ["legacy"],
after: ".newPage",
before: ".newPrior"
},
/*pagebreak: {
before: ".newPage",
avoid: ["h2", "tr", "h3", "h4", ".field"]
},*/
html2canvas: {
scale: 2,
logging: true,
dpi: 192,
letterRendering: true
},
jsPDF: {
unit: "mm",
format: [463, 600],
orientation: "landscape"
}
};
var doc = html2pdf()
.from(el)
.set(opt)
.toContainer()
.toCanvas()
.toImg()
.toPdf()
.save()回答 1
Stack Overflow用户
发布于 2022-02-28 12:31:00
我也一直在为这件事而奋斗。最后，我解决了这个问题。对我来说，诀窍是在width-property in html2canvas。我的应用程序有一个固定的宽度，并将html2canvas的宽度设置为我的应用程序的宽度，缩放A4文件。
html2canvas: { width: element_width},尝试添加上面的选项，看看它是否有效。尝试找出打印区域的宽度(以像素为单位)，并将element_width替换为该宽度。
为了完整起见:我正在使用白手起家创建web用户界面。在我的界面上，我包含了一个按钮，当单击该按钮时，会生成我的仪表板的PDF报告。下面我添加了我所使用的代码，以防有人在寻找Dash解决方案。要在Dash中实现这个功能，请下载html2pdf.bundlemin.js并将其复制到assets/文件夹中。PDF文件将被下载到浏览器默认下载文件夹(它可能提供一个下载提示，但这不是它对我的工作方式)。
from dash import html, clientside_callback
import dash_bootstrap_components as dbc
# Define your Dash app in the regular way
# In the layout define a component that will trigger the download of the
# PDF report. In this example a button will be responsible.
app.layout = html.Div(
id='main_container',
children = [
dbc.Button(
id='button_download_report',
children='Download PDF report',
className='me-1')
])
# Clientside callbacks allow you to directly insert Javascript code in your
# dashboards. There are also other ways, like including your own js files
# in the assets/ directory.
clientside_callback(
'''
function (button_clicked) {
if (button_clicked > 0) {
// Get the element that you want to print. In this example the
// whole dashboard is printed
var element = document.getElementById("main_container")
// create a date-time string to use for the filename
const d = new Date();
var month = (d.getMonth() + 1).toString()
if (month.length == 1) {
month = "0" + month
}
let text = d.getFullYear().toString() + month + d.getDay() + '-' + d.getHours() + d.getMinutes();
// Set the options to be used when printing the PDF
var main_container_width = element.style.width;
var opt = {
margin: 10,
filename: text + '_my-dashboard.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 3, width: main_container_width, dpi: 300 },
jsPDF: { unit: 'mm', format: 'A4', orientation: 'p' },
// Set pagebreaks if you like. It didn't work out well for me.
// pagebreak: { mode: ['avoid-all'] }
};
// Execute the save command.
html2pdf().from(element).set(opt).save();
}
}
''',
Output(component_id='button_download_report', component_property='n_clicks'),
Input(component_id='button_download_report', component_property='n_clicks')
)https://stackoverflow.com/questions/70880860
复制相似问题
腾讯云开发者
