我使用jsPDF和html2canvas拍摄了一个div的屏幕截图,并将其添加到PDF中,然后下载。我的代码运行得很好,但我需要的是根据div中的标签值更改PDF文件名。
例如:
标签值是"John_Simith",PDF文件名我想是John_Simith.PDF,但当标签值变成"Sarah"时,我需要文件名是Sarah.PDF.
这是我的Javascript:
function getPDF() {
var HTML_Width = $(".canvas_div_pdf").width();
var HTML_Height = $(".canvas_div_pdf").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width;
var PDF_Height = HTML_Height;
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height * 1.1;
var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
html2canvas($(".canvas_div_pdf")[0], { allowTaint: true }).then(function (canvas) {
canvas.getContext('2d');
console.log(canvas.height + " " + canvas.width);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', 0, 0, canvas_image_width, canvas_image_height);
}
pdf.save("Sample.pdf");
location.reload(true);
});
};
我不知道该怎么做,所以我需要你的建议,非常感谢。
您只需要从您的div 中获取此标签
// Here maybe https://api.jquery.com/text/ will cover your case
var label = $(".canvas_div_pdf").text()
...
pdf.save(`{label}.pdf`);
...
我想让你知道我可以解决这个问题,并将其发布以备将来有人需要答案;
首先创建另一个文本框,并用这样的隐藏div将其包围;
<div style="visibility:hidden"> <asp:TextBox ID="lblFname" runat="server" Text="0"></asp:TextBox> </div>
然后创建一个会话,使用SqlDataReader从数据库中检索值;
Session["Fname"] = dritem["first_name"].ToString();
然后将会话值与您刚刚创建的文本框绑定;
lblFname.Text = Session["Fname"].ToString();
然后声明一个变量来访问Javascript中的文本框;
var FirstName = document.getElementById("<%=lblFname.ClientID%>").value;
最后使用变量作为PDF文件名进行下载;
pdf.save(FirstName + "_.pdf");
谢谢大家,