JsPDF - 根据标签值更改文件名以下载 PDF答案

【问题标题】：JsPDF - Change filename based on a label value the download the PDFJsPDF - 根据标签值更改文件名以下载 PDF
【发布时间】：2020-04-03 10:36:38
【问题描述】：

我使用 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);
            });
        };

我不知道该怎么做，所以我需要你的建议，非常感谢。

【问题讨论】：

标签： javascript pdf filenames jspdf html2canvas

【解决方案1】：

你只需要从你的 div 中获取这个标签

// Here maybe https://api.jquery.com/text/ will cover your case
var label = $(".canvas_div_pdf").text()
...
pdf.save(`{label}.pdf`);
...

【讨论】：

非常感谢，但是“.canvas_div_pdf”是转换为PDF的div的类。我只是想获取的值

【解决方案2】：

我想让你知道我可以解决这个问题，并会发布它以防将来有人需要答案；

首先创建另一个文本框，并用这样的隐藏 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");

谢谢大家，

【讨论】：