Javascript 尝试将html表格打印为pdf时出错_Javascript_Html

Javascript 尝试将html表格打印为pdf时出错

javascript html

Javascript 尝试将html表格打印为pdf时出错,javascript,html,Javascript,Html,我正在尝试将html表格打印为pdf。用javascript打印表格的代码如下所示： function createPDF(){ var table = document.getElementById('mytable'); var style = "<style>"; style = style + "table {width: 100%;font: 17px Calibri;}"; style = styl

我正在尝试将html表格打印为pdf。用javascript打印表格的代码如下所示：

function createPDF(){
    var table = document.getElementById('mytable');

    var style = "<style>";
    style = style + "table {width: 100%;font: 17px Calibri;}";
    style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
    style = style + "padding: 2px 3px;text-align: center;}";
    style = style + "</style>";

    // CREATE A WINDOW OBJECT.
    var win = window.open('', '', 'height=700,width=700');

    win.document.write('<html><head>');
    win.document.write('<title>Profile</title>');   // <title> FOR PDF HEADER.
    win.document.write(style);          // ADD STYLE INSIDE THE HEAD TAG.
    win.document.write('</head>');
    win.document.write('<body>');
    win.document.write(table);         // THE TABLE CONTENTS INSIDE THE BODY TAG.
    win.document.write('</body></html>');

    win.document.close();   // CLOSE THE CURRENT WINDOW.

    win.print();    // PRINT THE CONTENTS.
}

函数createPDF（）{
var table=document.getElementById（'mytable'）；
var style=“”；
style=style+“表格{宽度：100%；字体：17px Calibri；}”；
style=style+“表格，th，td{边框：实心1px#DDD；边框折叠：折叠；”；
style=style+“填充：2px 3px；文本对齐：居中；}”；
样式=样式+“”；
//创建一个窗口对象。
var win=window.open（''，''，高度=700，宽度=700'）；
win.document.write（“”）；
win.document.write（'Profile'）；//用于PDF标题。
win.document.write（style）；//在HEAD标记中添加样式。
win.document.write（“”）；
win.document.write（“”）；
win.document.write（table）；//BODY标记内的表内容。
win.document.write（“”）；
win.document.close（）；//关闭当前窗口。
win.print（）；//打印内容。
}

如果表中动态填充了javascript，则不知道这是否重要。无论如何，每当我尝试打印html表时，我都会在pdf文档中得到[object html TableElement]。有人知道问题出在哪里吗

您需要从表中获取HTML—您只获取对象—而不是执行

var table=document.getElementById（'mytable'）.outerHTML

或
将表对象附加到win.document，但在任何情况下

你真的应该只写一次

函数createPDF（）{
const table=document.getElementById（'mytable'）.outerHTML；
常量样式=`
表{宽度：100%；字体：17px Calibri；}
表，th，td{边框：实心1px#DDD；边框折叠：折叠；
填充：2px 3px；文本对齐：居中；}
`;
//创建一个窗口对象。
const win=window.open（''，'高度=700，宽度=700'）；
consthtml=`Profile
${style}
${table}`；
win.document.write（html）；
win.document.close（）；
win.print（）；
}

使用对象（未测试）：

函数createPDF（）{
const table=document.getElementById（'mytable'）；
const style=document.createElement（“样式”）；
style.textContent=`表格{宽度：100%；字体：17px Calibri；}
表，th，td{边框：实心1px#DDD；边框折叠：折叠；
填充：2px 3px；文本对齐：居中；}`
//创建一个窗口对象。
const win=window.open（''，'高度=700，宽度=700'）；
const doc=win.document；
const title=document.createElement（“title”）；
title.textContent=“Profile”
单据正文追加（标题）；
单据体追加（样式）；
单据体追加（表）；
win.print（）；
}

或更好的

win.document.body.appendChild（表）为了澄清这一点，您需要抓取table元素，然后将其写入文档。这将强制将元素强制转换为字符串，浏览器使用方括号中的类名，而不是元素包含的HTML。@mousetail在使用document.writeYou时很难这样做，虽然您必须小心使用索引的顺序，但现在我遇到了以下错误：Uncaught-DOMException:未能对“Document”执行“append”：只允许对文档添加一个元素。
尝试将.body添加到文档中。或者使用第一个例子