使用jspdf和html2canvas来html生成pdf,且生成的pdf分页

使用jspdf 和html2canvas两个类库来生成pdf

如何做到pdf分页

要加入页眉页脚等

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
运用html2canvas 生成图片 然后 生成PDF chrome页面中图片在PDF中无法显示

问题: 运用html2canvas 生成图片 然后 生成PDF chrome页面中图片在PDF中无法显示 工具:html2canvas.js、jsPdf.debug.js 代码: var downPdf = document.getElementById("renderPdf");//获取按钮元素 downPdf.onclick = function() { html2canvas(document.body, { onrendered:function(canvas) { setTimeout(function(){ var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 595.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 555.28; var imgHeight = 555.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var triggerDownload = $("#downPng").attr("href", pageData).attr("download", "order-1111111111.jpg"); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save('content.pdf'); },5000) } }) } 求各位大神帮助!!!

如何在HTML中生成的pdf中添加标题

<div class="post-text" itemprop="text"> <p>I am working on codeigniter. I want to add save to pdf functionality to one of the div. I am using html2canvas to print it. My problem is I want to add a logo &amp; some other information at the header of the pdf, which is not visible on the webpage. I dont know how to do this. Below is my code.</p> <pre><code> &lt;script type='text/javascript' src="&lt;?php echo site_url('assets/js/html2canvas.js'); ?&gt;"&gt;&lt;/script&gt; &lt;script type='text/javascript' src="&lt;?php echo site_url('assets/js/jspdf.debug.js'); ?&gt;"&gt;&lt;/script&gt; &lt;script type='text/javascript'&gt;//&lt;![CDATA[ function demoFromHTML() { var pdf = new jsPDF('p', 'pt', 'letter'); pdf.addHTML($('#content')[0], function () { pdf.save('test.pdf'); }); specialElementHandlers = { '#bypassme': function (element, renderer) { return true } }; margins = { top: 30, bottom: 30, left: 30, width: '100%' //color: '#000' }; pdf.addHTML()( source, // HTML string or DOM elem ref. margins.left, // x coord margins.top, { // y coord 'width': margins.width, // max width of content on PDF 'elementHandlers': specialElementHandlers }, function (dispose) { pdf.save('test.pdf'); }, margins); } &lt;/script&gt; &lt;div id="content"&gt; Save this to PDF &lt;/div&gt; </code></pre> <p>Pls help.</p> </div>

将jsPDF生成的pdf文件上传到php服务器

<div class="post-text" itemprop="text"> <p>I am uploading a pdf file generated by jsPDF to the php server. What I am missing here? How can I check the pdf file content before sending it? </p> <p>In JS, </p> <pre><code>var doc = new jsPDF(parameters); doc.addHTML($('#test')[0], 0, 0, { }, function() { pdf = doc.output('blob'); }); $.ajax({ url: 'upload.php', type: 'post', data: {data: pdf}, processData: false, }).done(function (data) { alert(data); }).fail(function (xhr, status, err) { alert(err); }); </code></pre> <p>And in php, </p> <pre><code>&lt;?php if(!empty($_POST['data'])){ $data = base64_decode($_POST['data']); file_put_contents( "tmp/test.pdf", $data); else { echo "error"; } ?&gt; </code></pre> </div>

html2canvas 截图出来的总有一点模糊

``` var content = document.getElementById("content"); var _width = $('#content').width(), _height = $('#content').height(); var canvas = document.createElement("canvas"); var scale = 5.5; //放大倍数 canvas.width = _width * scale; canvas.height = _height * scale; canvas.getContext("2d").scale(scale, scale); html2canvas(content, { backgroundColor: '#FFFFFF', //设置截图的背景色 useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题 allowTaint: true, //允许跨域(图片跨域相关) taintTest: true, //是否在渲染前测试图片 scale: scale, canvas: canvas, width: _width, heigth: _height, dpi: window.devicePixelRatio * 96, onrendered: function(canvas) { var context = canvas.getContext('2d'); // 【重要】关闭抗锯齿 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; var dataUrl = canvas.toDataURL("image/png", 1.0), newImg = document.createElement("img"); newImg.src = dataUrl; $('#pdf_png').empty().append(newImg); // newImg.style.width = '100%'; // 方向默认竖直,尺寸ponits,格式a4[595.28,841.89] // var pdf = new jsPDF('', 'mm', 'a4'); // pdf.addImage(dataUrl, 'JPEG', 0, 0, 210, 297) // pdf.save(new Date().getTime() + '.pdf'); } }); ``` 效果图:![图片说明](https://img-ask.csdn.net/upload/202003/05/1583372707_536741.png) 哪位大佬者能推荐什么方法。 或者能远程帮忙代写,截取高分辨率图片,导出pdf能打印直接用的,有偿! QQ 919900480

如何使用HTML2PDF设置横向方向

<div class="post-text" itemprop="text"> <p>How to change the page orientation of pdf file generated via HTML2PDF to landscape...? By default, it is opening as Portrait format. I have changed it in html2pdf.class, but nothing changed.Please help me..</p> <p>This is the php code:</p> <pre><code> require('../../includes/html2pdf/html2fpdf.php'); $pdf=new HTML2FPDF('L','mm','A3'); $pdf-&gt;AddPage(); $pdf-&gt;setFont("arial",'',8); $pdf-&gt;WriteHTML($data); $pdf-&gt;Output("outstanding.pdf","I"); </code></pre> </div>

jspdf输出变为空白pdf

<div class="post-text" itemprop="text"> <p>I have the large amount of data from the table,and I am displaying the data in tables and when I want to convert the tales in to pdf and I did as follows</p> <pre><code>$("#btnPdf").click(function(){ var dt = new Date(); var day = dt.getDate(); var month = dt.getMonth() + 1; var year = dt.getFullYear(); var hour = dt.getHours(); var mins = dt.getMinutes(); var postfix = month + "-" + day + "-" + year + "_" + hour + ":" + mins; var docs = 'ltr_'+ postfix; var w = 1000; var h = 1000; var div = document.querySelector('#divtoconvert'); var canvas = document.createElement('canvas'); canvas.width = w*2; canvas.height = h*2; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; var context = canvas.getContext('2d'); context.scale(2,2); var count = document.getElementById('count').value; var doc = new jsPDF('p', 'mm', "a4"); doc.deletePage(1); for(var j=1;j&lt;=count;j++) { html2canvas(document.getElementById("tbl-data"+j), { useCORS: true, allowTaint: true, letterRendering: true, scale: 2, canvas: canvas, onrendered: function(canvas) { var width = canvas.width; var height = canvas.height; var millimeters = {}; millimeters.width = Math.floor(width * 0.264583); millimeters.height = Math.floor(height * 0.264583); var imgData = canvas.toDataURL('image/png',1.0); doc.addPage(millimeters.width, millimeters.height); doc.addImage(imgData, 'png',0,0); }, }); } setTimeout(function() { //jsPDF code to save file doc.save(docs+'.pdf'); }, 2000); }); </code></pre> <p>I have retrieved the data in loop and I have showed each row as table in html and all is doing good for low data from the database. But I have the 115 rows in the database, for this the pdf's are displaying as empty, don't know why it is happening? Here count is equals to 115 rows and 'tbl-data' is the id of the each table. Please suggest me the right path, thanks in advance.</p> </div>

html2canvas 获取不到节点的内容

我的界面内容篇幅比较长,再用html2canvasjs截取界面内容时,只能截取到 界面中显示的节点内容,不显示的节点内容截取不到 ``` <div class="text-center" style="margin-top: 20px;margin-bottom: 20px;" id="but"> <button class="btn btn-warning" id="renderPdf">打印保险理赔申请表</button> </div> var downPdf = document.getElementById("renderPdf"); downPdf.onclick = function() { html2canvas(document.getElementById("but"), { allowTaint: false, taintTest: false, onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save('content.pdf'); } }); ``` 上面这段代码节点可以截取到 ![图片说明](https://img-ask.csdn.net/upload/201901/21/1548061179_347879.png) ``` <div class="panel-heading" id="tencent"> <h2 class="text-center"> 腾讯商业保险医疗险理赔申请表<br> <span>(员工和家属请分开填写)</span> </h2> </div> var downPdf = document.getElementById("renderPdf"); downPdf.onclick = function() { html2canvas(document.getElementById("tencent"), { allowTaint: false, taintTest: false, onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save('content.pdf'); } }); ``` 这个节点就获取不到 ![图片说明](https://img-ask.csdn.net/upload/201901/21/1548061139_134552.png)

html2canvas在360浏览器兼容模式下报错问题

需求是将页面上的一张图表做前端导出,我用到了两个插件,一个是html2canvas进行截图,还有一个是jspdf生成pdf文件并且保存到本地 firefox和chrome都已经通过测试了,360的兼容模式下不能正常跑。 代码跑到这里的时候会报错: html2canvas($("#vm0"), { onrendered: function (canvas) { $(canvas).attr({"style":"margin-top:10px;","id":"vm0_save"}) $("#realchart").append(canvas); } }); 刚开始浏览器控制台抛出这个错误: ![图片说明](https://img-ask.csdn.net/upload/201706/19/1497850918_99930.png) 下了一个es6-promise依赖包,然后在html2canvas.js最上面加了一句: var Promise = require('es6-promise').Promise; 这个报错就不再出现了,但是随之而来的是下面这个报错: ![图片说明](https://img-ask.csdn.net/upload/201706/19/1497851219_728316.png) 然后就没有什么头绪解决了,有遇到过这个问题的大神吗? 另外发现html2canvas的坑挺多的,有没有可以替代它的插件

使用多个“选择”选项生成PDF?

<div class="post-text" itemprop="text"> <p>I have a page showing a list of "selected" members with "ranks" and "year" and I want it to a pdf without showing the buttons.</p> <p>How can I generate such a PDF without losing the style?</p> <p>I've tried using plain jsPDF but it returns only some values but not (select) tags </p> <pre><code>&lt;?php echo '&lt;script&gt;'; echo 'function onClick() {'; echo "var pdf = new jsPDF('p', 'pt', 'letter');"; echo 'pdf.canvas.height = 72 * 11;'; echo 'pdf.canvas.width = 72 * 8.5;'; echo "pdf.fromHTML($('.matrikule').get(0), 10, 10, {'width': 180});"; echo 'pdf.save("test.pdf");'; echo '};'; echo 'var element = document.getElementById("clickbind");'; echo 'element.addEventListener("click", onClick);'; echo '&lt;/script&gt;'; ?&gt; </code></pre> <p>Refer to the screenshot beneath</p> <p><a href="https://i.stack.imgur.com/prsIa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/prsIa.png" alt="enter image description here"></a></p> <p>I want the PDF to show exactly the way it's on web page. Is this only achievable with html2canvas?</p> </div>

请教一下jsPDF转换的pdf文件不是很清晰 打印出来后有一点模糊 这种该怎么解决啊

var target = $("#titBody"); //$("#titBody").css("background","#FFFFFF"); html2canvas(target, { onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save("content.pdf"); } })

使用html2canvas将屏幕截图保存到web文件夹

<div class="post-text" itemprop="text"> <p>I have a website, where user can take screenshot of that website and that screenshot should save automaticly to folder "posters" inside my "www" folder. But when I try to make an screenshot, it is saved directly to "www" folder and not to the "posters" folder. I tried to change atributes of the "posters" folder to 777 but It did not helped. And also, that "posters" folder gives this error: Forbidden You don't have permission to access /posters/ on this server. when I try to visit it via browser. I dont know what is wrong.</p> <p>Here is my save.php code:</p> <pre><code>&lt;?php //Get the base-64 string from data $filteredData = substr($_POST['img_val'], strpos($_POST['img_val'], ",") + 1); //Decode the string $unencodedData = base64_decode($filteredData); //Save the image file_put_contents('img_' . date("U") . '.png', $unencodedData); move_uploaded_file('img.png', './posters/$newname'); ?&gt; &lt;h2&gt;Save the image and show to user&lt;/h2&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;a href="img.png" target="blank"&gt; Click Here to See The Image Saved to Server&lt;/a&gt; &lt;/td&gt; &lt;td align="right"&gt; &lt;a href="index.php"&gt; Click Here to Go Back&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;br /&gt; &lt;br /&gt; &lt;span&gt; Here is Client-sided image: &lt;/span&gt; &lt;br /&gt; &lt;?php //Show the image echo '&lt;img src="' . $_POST['img_val'] . '" /&gt;'; ?&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;style type="text/css"&gt; body, a, span { font-family: Tahoma; font-size: 10pt; font-weight: bold; } &lt;/style&gt; </code></pre> <p>Is it possible to make something like this? <code>file_put_contents(.PathToFolder/'img_' . date("U") . '.png', $unencodedData);</code></p> </div>

如何使用jspdf创建多个页面

<div class="post-text" itemprop="text"> <p>I want to make a multiple page PDF file using jspdf library. I used this code. But when this code is used, there is no margin(top) from 2page. I want to make multiple page and clear margin about all pages. Or give me a another way. this PDF make some noise.</p> <p>Please help me.</p> <pre><code>function pdfDown(){ html2canvas(document.getElementById("download"), { onrendered : function(canvas){ var imgData = canvas.toDataURL('image/png'); var imgWidth = 190; var pageHeight = 290; var imgHeight = canvas.height * imgWidth / canvas.width; var heightLeft = imgHeight; var doc = new jsPDF('p', 'mm'); var position = 10; doc.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); heightLeft -= pageHeight; while (heightLeft &gt;= 0) { position = heightLeft - imgHeight +13; doc.addPage(); doc.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight); heightLeft -= pageHeight; } doc.save('test.pdf'); } }); </code></pre> <p>For your reference, I use php documentation.</p> </div>

java后台将base64字符串转换为PDF后生成的PDF打不开怎么回事呀

![图片说明](https://img-ask.csdn.net/upload/201910/12/1570868633_161609.jpg) 后台代码: public static void base64StringToPdf(String base64Content,String filePath){ File file = new File(filePath);// 将原来参数修改为字符串 BASE64Decoder decoder = new BASE64Decoder(); BufferedInputStream bin = null; FileOutputStream fout = null; BufferedOutputStream bout = null; try { //将base64编码的字符串解码成字节数组 byte[] bytes = decoder.decodeBuffer(base64Content); //创建一个将bytes作为其缓冲区的ByteArrayInputStream对象 ByteArrayInputStream bais = new ByteArrayInputStream(bytes); //创建从底层输入流中读取数据的缓冲输入流对象 bin = new BufferedInputStream(bais); //创建到指定文件的输出流 fout = new FileOutputStream(file); //为文件输出流对接缓冲输出流对象 bout = new BufferedOutputStream(fout); byte[] buffers = new byte[1024]; int len = bin.read(buffers); while(len != -1){ bout.write(buffers, 0, len); len = bin.read(buffers); } //刷新此输出流并强制写出所有缓冲的输出字节,必须这行代码,否则有可能有问题 bout.flush(); } catch (IOException e) { e.printStackTrace(); } finally { try { bout.close(); fout.close(); bin.close(); } catch (IOException e) { e.printStackTrace(); } } } 前台是将页面展示的数据图标什么的生成PDF 前台代码: function downloadofpdf(){ var varname = $("#taskid").text(); if(confirm("您确认下载该PDF文件吗?")){ var target = document.getElementById("bodyid"); target.style.background = "#FFFFFF"; // if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate(); html2canvas(target, { onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth /1592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save(varname+".pdf"); // 将pdf输入为base格式的字符串 var buffer = pdf.output("datauristring"); // // 将base64格式的字符串转换为file文件 // var myfile = dataURLtoFile(buffer, varname); // var formdata = new FormData(); // formdata.append(name, myfile); $.post("/riskManage/uploadpdf",{data:JSON.stringify({formdata:buffer})},function(result){ //alert("hao"); }) //sc(); }, background: "#fff" }) } }

如何将HTML表格保存为PDF格式的图像

<div class="post-text" itemprop="text"> <p>I have a problem trying to export an HTML table to PDF with all the canvas it has.</p> <p>The thing is, i can export the canvas as an image to the PDF but i cant seem to do the same with the tables.</p> <p>Here is the code:</p> <pre><code>echo '&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"&gt;&lt;/script&gt;'; echo"&lt;script&gt; download.addEventListener('click', function () { var imgData = document.getElementsByTagName('canvas')[0].toDataURL('image/png', 1.0); var imgData2 = document.getElementsByTagName('canvas')[1].toDataURL('image/png', 1.0); var imgData_table = document.getElementsByTagName('table')[0].toDataURL('image/png', 1.0); var pdf = new jsPDF('p', 'px', 'a4'); var i = new Image(); var pageHeight = pdf.internal.pageSize.height; var pageWidth = pdf.internal.pageSize.width; console.log(pageHeight + ', ' + pageWidth); i.src = imgData; setTimeout(function(){ pdf.addImage(imgData_table, 'png', 0, 0,); pdf.addPage(); //console.log(i.width + ', ' + i.height); pdf.addImage(imgData2, 'png', 0, 0,); pdf.addPage(); pdf.addImage(imgData, 'png', 0,0); pdf.save('download.pdf'); },600); }, false); &lt;/script&gt;"; echo "&lt;div class='col-sm-6'&gt; &lt;button id='download'&gt;download&lt;/button&gt; &lt;/div&gt; "; </code></pre> <p>Does anyone knows what can be done in this case? Thanks!</p> </div>

使用HTML字符串中的wkhtmltopdf导出为PDF

<div class="post-text" itemprop="text"> <p>I have a website with HTML/CSS and a JavaScript generated inline datepicker. You can mark days in datepicker.</p> <p>I want to export the whole content with the marks in datepicker as a PDF.</p> <p>With Client-Side jsPDF and canvas2html I have a problem with position and sizes. I get partial content in the PDF only (begin or end from datepicker).</p> <p>Now I try it with wkhtmltopdf.</p> <p>I get the HTML with $("#datepicker").html() and send it to a PHP Script. It works with a test string, but I get a blank pdf when I use real data.</p> <pre><code>$.ajax({ data: 'htmlstring=' + escape($("#datepicker").html()), url: 'http://example.com/htmltopdf.php', method: 'POST', success: function(msg) { alert(msg); } }); &lt;?php $htmlString = $_POST["htmlstring"]; //$htmlString = rawurldecode($htmlString); exec('echo "&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;' . $htmlString . '&lt;/body&gt;&lt;/html&gt;" | /usr/local/bin/wkhtmltopdf --encoding UTF-8 - export.pdf'); ?&gt; </code></pre> <p>I also like a different working solution.</p> </div>

生成Pdf时出现PHP FPDF错误

<div class="post-text" itemprop="text"> <p>I am trying to generate pdf using Fpdf. But i got this error while submitting the button.</p> <blockquote> <blockquote> <p>Fatal error: Uncaught exception 'Exception' with message 'FPDF error: Some data has already been output, can't send PDF file (output started at C:\xampp\htdocs\AutoMall2\testindex.php:237)' in C:\xampp\htdocs\AutoMall2\fpdf\fpdf.php:271 Stack trace: #0 C:\xampp\htdocs\AutoMall2\fpdf\fpdf.php(1040): FPDF-&gt;Error('Some data has a...') #1 C:\xampp\htdocs\AutoMall2\fpdf\fpdf.php(987): FPDF-&gt;_checkoutput() #2 C:\xampp\htdocs\AutoMall2\testindex.php(274): FPDF-&gt;Output('2017-04-0313.pd...', 'I') #3 {main} thrown in C:\xampp\htdocs\AutoMall2\fpdf\fpdf.php on line 271</p> </blockquote> </blockquote> <p>I already search for this error but no success I also look some similar question but same.</p> <pre><code>&lt;?php include_once('connect.php'); date_default_timezone_set("Asia/Karachi"); $date=date("Y-m-d"); $time=date("h:i:s A"); ?&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Car Parking System&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"&gt; &lt;link rel="stylesheet" href="css/bootstrap-theme.css"/&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;script src="js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;style type="text/css"&gt; body{ background: #222222; } label{ color: white; font-size: 1.4em; text-transform: uppercase; font-family: 'gatepassfont'; font-weight: 600; } .heading { color:white; } table tr td { padding: 50px; } .custom_button { background:red; color:white; padding:4px 20px 4px 20px; font-weight: 50px; font-size: 24px; /*margin:0px 0px 0px 115px;*/ } .custom_button:hover { background:#b30000; color:white; } .select_text { border-radius: 0px; background:#4d4d4d; color:white; border-style: none; font-size: 1.2em; text-transform: uppercase; font-family: 'gatepassfont'; font-weight: 100; } .textbox_color { background:#4d4d4d; color:white; border-style: none; border-radius:0px; font-family: 'gatepassfont'; font-size: 1.2em; /*text-transform: uppercase;*/ font-weight: 100; } @font-face { font-family: 'gatepassfont'; src: url('BebasNeue-webfont.woff') format('woff');/* Super Modern Browsers */ } h2.gatepass { /*border-bottom:solid 5px #fa565a;*/ padding-top: 5px; padding-bottom: 5px; font-family: 'gatepassfont'; font-size: 2em; background:#ed1c24 ; font-weight: 300; padding-right: -200px; } .logo { width:250px; height:auto; padding: 10px; } .slogan { color:white; font-size: 0.5em; font-style: italic; position: relative; top:33px; left: -130px; } &lt;/style&gt; &lt;script type="text/javascript" src="tableExport/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="tableExport/tableExport.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="tableExport/jquery.base64.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="tableExport/html2canvas.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="tableExport/jspdf/jspdf.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="tableExport/jspdf/libs/base64.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="tableExport/jspdf/libs/sprintf.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jsPDFautotable/jspdf.js"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.0/jspdf.plugin.autotable.js"&gt;&lt;/script&gt; &lt;!--Sweet Alert--&gt; &lt;link rel="stylesheet" type="text/css" href="sweetalert2/dist/sweetalert2.min.css"&gt; &lt;script src="sweetalert2/dist/sweetalert2.min.js"&gt;&lt;/script&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;!--form horizontal--&gt; &lt;div class="row"&gt; &lt;div class="container"&gt; &lt;img src="automalllogo.png" class="img-responsive col-lg-4 col-md-4 col-sm-12 col-xs-12 col-lg-offset-4 col-md-offset-4 logo" /&gt; &lt;p class="slogan"&gt;Pleasure of Extreme Machines&lt;/p&gt; &lt;h2 class="heading gatepass text-center col-lg-4 col-md-4 col-sm-12 col-xs-12 col-lg-offset-4 col-md-offset-4"&gt;&lt;strong&gt;GATE PASS&lt;/strong&gt;&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--form--&gt; &lt;form method="POST" action=""&gt; &lt;div class="form-group col-lg-4 col-md-4 col-lg-offset-4 col-md-offset-4" &gt; &lt;label class="control-label " &gt;VEHICLE&lt;/label&gt; &lt;div &gt; &lt;select name="vehicle" class="form-control select_text"&gt; &lt;option value="Toyota" &gt;Toyota&lt;/option&gt; &lt;option value="Civic"&gt;Civic&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group col-lg-4 col-md-4 col-lg-offset-4 col-md-offset-4 "&gt; &lt;label &gt;REG/CH.NO&lt;/label&gt; &lt;div &gt; &lt;input type="text" name="registration" class="form-control textbox_color" placeholder="Enter Registration No" required=""&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group col-lg-4 col-md-4 col-lg-offset-4 col-md-offset-4 "&gt; &lt;label class="control-label " &gt;MILEAGE&lt;/label&gt; &lt;div &gt; &lt;input type="text" name="mileage" class="form-control textbox_color" placeholder="Enter Mileage" required=""&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group col-lg-4 col-md-4 col-lg-offset-4 col-md-offset-4 "&gt; &lt;label class="control-label " &gt;TO&lt;/label&gt; &lt;div &gt; &lt;input type="text" name="to" class="form-control textbox_color" placeholder="Enter To" required=""&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group col-lg-4 col-md-4 col-lg-offset-4 col-md-offset-4 "&gt; &lt;label class="control-label " &gt;DRIVER&lt;/label&gt; &lt;div &gt; &lt;input type="text" name="driver" class="form-control textbox_color" placeholder="Enter driver" required=""&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group col-lg-4 col-md-4 col-lg-offset-4 col-md-offset-4"&gt; &lt;label class="control-label " &gt;C/O:&lt;/label&gt; &lt;div &gt; &lt;input type="text" name="co" class="form-control textbox_color" placeholder="Enter C/O" required=""&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group col-lg-4 col-md-4 col-lg-offset-4 col-md-offset-4 " &gt; &lt;label class="control-label " &gt;APPROVED BY&lt;/label&gt; &lt;div &gt; &lt;select name="approvedby" class="form-control select_text"&gt; &lt;option value="Irfan"&gt;Irfan&lt;/option&gt; &lt;option value="Rizwan"&gt;Rizwan&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group col-lg-8 col-md-8 col-lg-offset-4 col-md-offset-4"&gt; &lt;div &gt; &lt;button type="submit" name="submit" class="btn custom_button" id="submit"&gt;Submit&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;!--form--&gt; &lt;/div&gt; &lt;!--end--&gt; &lt;/body&gt; &lt;/html&gt; &lt;?php if(isset($_POST['submit'])) { $vehicle=$_POST['vehicle']; $registration=$_POST['registration']; $mileage=$_POST['mileage']; $to=$_POST['to']; $driver=$_POST['driver']; $co=$_POST['co']; $approvedby=$_POST['approvedby']; $date; $time; $query="INSERT INTO gatepass (vehicle,registration,mileage,to_location,driver,co,approvedby,currentdate,currenttime) VALUES ('$vehicle','$registration','$mileage','$to','$driver','$co','$approvedby','$date','$time')"; $queryrun=mysqli_query($connection,$query); $connection=mysqli_connect($localhost,$username,$password,$db); $query="SELECT id from gatepass WHERE currentdate='$date' AND currenttime='$time'"; $queryrun=mysqli_query($connection,$query); $row=mysqli_fetch_array($queryrun); $ID=$row['id']; if($queryrun==TRUE) { require('fpdf/fpdf.php'); $pdf = new FPDF(); $pdf-&gt;AddPage(); $pdf-&gt;SetFont('Arial','B',16); $pdf-&gt;Cell(40,10,'working or not?!'); $pdf-&gt;Output($date.$ID.'.pdf','I'); } else{ mysqli_error($connection); } } ?&gt; </code></pre> <p><a href="https://i.stack.imgur.com/CUuXa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CUuXa.png" alt="enter image description here"></a></p> </div>

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

ArrayList源码分析(入门篇)

ArrayList源码分析 前言: 写这篇博客的主要原因是,在我上一次参加千牵科技Java实习生面试时,有被面试官问到ArrayList为什么查找的速度较快,插入和删除的速度较慢?当时我回答得不好,很大的一部分原因是因为我没有阅读过ArrayList源码,虽然最后收到Offer了,但我拒绝了,打算寒假学得再深入些再广泛些,下学期开学后再去投递其他更好的公司。为了更加深入理解ArrayList,也为

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

String s = new String(" a ") 到底产生几个对象?

老生常谈的一个梗,到2020了还在争论,你们一天天的,哎哎哎,我不是针对你一个,我是说在座的各位都是人才! 上图红色的这3个箭头,对于通过new产生一个字符串(”宜春”)时,会先去常量池中查找是否已经有了”宜春”对象,如果没有则在常量池中创建一个此字符串对象,然后堆中再创建一个常量池中此”宜春”对象的拷贝对象。 也就是说准确答案是产生了一个或两个对象,如果常量池中原来没有 ”宜春” ,就是两个。...

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

玩转springboot启动banner定义所得

最近接手了一个springboot项目,不是不熟悉这个框架,启动时打印的信息吸引了我。 这不是我熟悉的常用springboot的打印信息啊,我打开自己的项目: 还真是的,不用默认的感觉也挺高大上的。一时兴起,就去研究了一下源代码,还正是有些收获,稍后我会总结一下。正常情况下做为一个老程序员,是不会对这种小儿科感兴趣的,不就是一个控制台打印嘛。哈哈! 于是出于最初的好奇,研究了项目的源代码。看到

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

终于懂了TCP和UDP协议区别

终于懂了TCP和UDP协议区别

你打算用Java 8一辈子都不打算升级到Java 14,真香

我们程序员应该抱着尝鲜、猎奇的心态,否则就容易固步自封,技术停滞不前。

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《经典算法案例》01-08:如何使用质数设计扫雷(Minesweeper)游戏

我们都玩过Windows操作系统中的经典游戏扫雷(Minesweeper),如果把质数当作一颗雷,那么,表格中红色的数字哪些是雷(质数)?您能找出多少个呢?文中用列表的方式罗列了10000以内的自然数、质数(素数),6的倍数等,方便大家观察质数的分布规律及特性,以便对算法求解有指导意义。另外,判断质数是初学算法,理解算法重要性的一个非常好的案例。

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

Java岗开发3年,公司临时抽查算法,离职后这几题我记一辈子

前几天我们公司做了一件蠢事,非常非常愚蠢的事情。我原以为从学校出来之后,除了找工作有测试外,不会有任何与考试有关的事儿。 但是,天有不测风云,公司技术总监、人事总监两位大佬突然降临到我们事业线,叫上我老大,给我们组织了一场别开生面的“考试”。 那是一个风和日丽的下午,我翘着二郎腿,左手端着一杯卡布奇诺,右手抓着我的罗技鼠标,滚动着轮轴,穿梭在头条热点之间。 “淡黄的长裙~蓬松的头发...

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

立即提问
相关内容推荐