我正在尝试制作一个用户可以制作pdf的网站。我想在按"创建工作表"时直接在按钮旁边显示pdf。我试图用javascript和php来做到这一点,但是我的iframe中得到了一个奇怪的语法,而不是实际的pdf。有谁知道这样做的正确方法吗?
<?php
$titel = "TITLE";
require_once('tcpdf/tcpdf.php');
$obj_pdf = new TCPDF('P', PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
$obj_pdf->SetCreator(PDF_CREATOR);
$obj_pdf->SetTitle("educationworksheet.com");
$obj_pdf->SetHeaderData('', '', PDF_HEADER_TITLE, PDF_HEADER_STRING);
$obj_pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
$obj_pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
$obj_pdf->SetDefaultMonospacedFont('helvetica');
$obj_pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
$obj_pdf->SetMargins(PDF_MARGIN_LEFT, '5', PDF_MARGIN_RIGHT);
$obj_pdf->setPrintHeader(false);
$obj_pdf->setPrintFooter(false);
$obj_pdf->SetAutoPageBreak(TRUE, 10);
$obj_pdf->SetFont('helvetica', '', 12);
$obj_pdf->AddPage();
$content .= '
<h3 align="center">TITLE</h3><br /><br />
<h4 align="left">This is what we are gonne do '.$titel.'</h4><br /><br /><h4 align = "left">Name:____________________________</h4>
';
$obj_pdf->writeHTML($content);
$obj_pdf->Output('sample.pdf', 'I');
?>
<!DOCTYPE html>
<html>
<head>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("pdf_viewer").srcdoc = this.responseText;
}
};
xhttp.open("GET", "/test2.php", true);
xhttp.send();
}
</script>
</head>
<body>
<button height="10px" width="30px" onclick="loadDoc()" name="create_pdf" value="create worksheet">create worksheet</button>
<iframe id="pdf_viewer"></iframe>
</body>
</html>
首先,问题是浏览器不会以这种方式将PDF数据解释为PDF。srcdoc
被视为原始 HTML。
有几种不同的方法可以实现"点击时生成"功能:
1(你可以完全删除AJAX,只使用HTML表单标记来完成这个。使用表单元素上的target
属性来定位您的 PDF 查看器 iframe。
<body>
<!-- Set up our form to target the PDF viewer iframe.-->
<!-- Note: This will work with both GET and POST methods -->
<form action="/test2.php" method="get" target="pdf_viewer">
<input type="text" name="titel">
<button height="10px" width="30px" type="submit" name="create_pdf_btn" value="create worksheet">create worksheet</button>
</form>
<!-- Initially, frame is blank, will update to PDF generation URL on form submit.
I created a special empty HTML file for this purpose. -->
<iframe name="pdf_viewer" id="pdf_viewer" src="blank.html"></iframe>
</body>
然后在test2.php
您只需像以前一样内联生成PDF。
2( 在服务器上生成文件并使用 AJAX 响应传递保存的 PDF 的位置。下面的答案打开了一个带有window.open
的新窗口,但您只需将该window.open
行替换为使用新URL更新document.getElementById('pdf_viewer').src
行即可。
https://stackoverflow.com/a/46529459/395384
3( 返回 Base64 并使用冗长的数据 URL。有关示例,请参阅此处:
https://stackoverflow.com/a/35197585/395384