使用JavaScript将HTML SharePoint表单数据转换为PDF文件

我想把一个HTML页面转换成PDF，它有一个允许用户输入数据的表单。因此，一旦按下“另存为PDF”按钮，代码应该能够从输入框中读取数据并创建PDF

由于它是使用SharePoint创建的内部网站，因此无法将链接或文件共享/传送到其他网站

例如：

    <div id="mainContentWide">
  <h2>WorkPlace Services</h2>
    <h3 class="curveBoxWide">Description</h3>
    <div class="curveBoxWide">
  <p></p></div>
  <table id="mytab1">
        <thead>
            <tr class="thead item">
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
                <th>Annual Price ($)</th>
                <th>One time Extended Cost ($)</th>
                <th>Annual Extended Cost ($)</th>
                <th>Sub-Total</th>
            </tr>
        </thead>
        <tbody>
            <tr class="item odd">
                <td class="title"><p>aaa</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">136</td>
                <td>6</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>bbb</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">368</td>
                <td>85</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>ccc</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">270</td>
                <td>56</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>ddd</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">180</td>
                <td>45</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
                <tr class="item odd">
                <td class="title"><p>eee</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">0</td>
                <td>1600</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>fff</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">0</td>
                <td>700</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>ggg</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">915</td>
                <td>220</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>hhh</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">0</td>
                <td>550</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>iii</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">0</td>
                <td>500</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item category">
                <td colspan="7"><p>jjj</p></td>
            </tr>
            <tr class="item">
                <td class="title"><p>kkk</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">125</td>
                <td>36</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>lll</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">160</td>
                <td>37</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>mmm</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">220</td>
                <td>50</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>nnn</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">550</td>
                <td>110</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>ooo</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">1050</td>
                <td>0</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>ppp</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">4210</td>
                <td>850</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>qqq</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">125</td>
                <td>210</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>rrr</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">160</td>
                <td>36</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>sss</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">685</td>
                <td>154</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>ttt</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">5210</td>
                <td>1470</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>uuu</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">4740</td>
                <td>940</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>vvv</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">800</td>
                <td>380</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item">
                <td class="title"><p>xxx</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">3750</td>
                <td>850</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>yyy</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">32000</td>
                <td>7100</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item category">
                <td colspan="7"><p>zzz</p></td>
            </tr>
            <tr class="item">
                <td class="title"><p>abc</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">2850</td>
                <td>570</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>       
            <tr class="item odd">
                <td class="title"><p>def</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">1125</td>
                <td>225</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
            <tr class="item odd">
                <td class="title"><p>ghi</p></td>
                <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
                <td class="price">3750</td>
                <td>750</td>
                <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
                <td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
                <td><input class="subtotal1" type="text" value="0" readonly/></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td class="title"><p>Total:</p></td>
                <td class="grandTotal" colspan="6"><input id="total" type="text" value="0" readonly/></td>
            </tr>
        </tfoot>
    </table>
    <!-- end #mainContent --></div>

工作场所服务
描述

一个
两个
三
年价格（元）
一次性扩展成本（美元）
年度扩展成本（美元）
小计
aaa

136
6.
bbb

368
85
ccc

270
56
ddd

180
45
eee

0
1600
fff

0
700
ggg

915
220
啊

0
550
三,

0
500
jjj

kkk

125
36
微光

160
37
嗯

220
50
nnn

550
110
哦

1050
0
购买力平价

4210
850
qqq

125
210
存款准备金率

160
36
sss

685
154
ttt

5210
1470
uuu

4740
940
vvv

800
380
xxx

3750
850
yyy

32000
7100
zzz

abc

2850
570
def

1125
225
ghi

3750
750
总数：

---

试过了：jspdf，它不起作用。

为什么不能使用jspdf？据我所知，这是从javascript创建pdf的最简单方法。jsPDF不会从输入框中读取值。。它是未定义的..jsPDF不应该读取值吗？看看您可以使用jQuery或标准DOM选择器读取该值。。我有一张20行5行的桌子，每个单元格都有输入框。。共有5-6页，表的维度各不相同。。因此，它应该以相同的结构保存为PDF。从您的示例中，查看类似的内容，它可以捕获html并将其转换为PDF。您可能需要编写一些特殊的对象处理程序并稍微调整选项，但它应该提供