zgapdfsigner/test.html

251 lines
8.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Test for ZgaPdfSigner </title>
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/pdf-fontkit@1.8.9/dist/fontkit.umd.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/pako@1.0.11/dist/pako_inflate.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/node-forge@1.3.1/dist/forge.min.js" type="text/javascript"></script>
<script src="dist/zgapdfsigner.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* @param {string} fid
* @return {Promise<ArrayBuffer>}
*/
function readFile(fid){
return new Promise((resolve, reject) => {
var f = document.getElementById(fid).files[0];
if(f){
var reader = new FileReader();
reader.onload = function(a_evt){
resolve(a_evt.target.result);
};
reader.readAsArrayBuffer(f);
}else{
resolve(null);
}
});
}
/**
* @param {string} fid
* @return {string}
*/
function getFilExt(fid){
var n = document.getElementById(fid).files[0].name;
var i = n.lastIndexOf(".");
if(i >= 0){
return n.slice(i + 1);
}else{
return null;
}
}
async function testMe(){
/** @type {ArrayBuffer} */
var pdf = await readFile("fff");
if(!pdf){
alert("The target pdf is not specified.");
return;
}
/** @type {ArrayBuffer} */
var pfx = await readFile("kkk");
/** @type {string} */
var ps = document.getElementById("pwd").value;
if(pfx && !ps){
alert("The passphrase is not specified.");
return;
}
/** @type {ArrayBuffer} */
var img = await readFile("img");
/** @type {string} */
var imgType = "";
if(img){
imgType = getFilExt("img");
}
/** @type {string} */
var txt = document.getElementById("txt").value;
/** @type {ArrayBuffer} */
var font = await readFile("font");
/** @type {ArrayBuffer} */
var pubcert = await readFile("pubcert");
/** @type {string} */
var upwd = document.getElementById("upwd").value;
/** @type {SignOption} */
var sopt = null;
if(pfx){
sopt = {
p12cert: pfx,
pwd: ps,
permission: parseInt(document.getElementById("sperm").value),
reason: document.getElementById("tReason").value,
location: document.getElementById("tLocation").value,
contact: document.getElementById("tContact").value,
debug: true,
};
if(img || txt){
sopt.drawinf = {
area: {
x: parseInt(document.getElementById("drawx").value), // left
y: 150, // top
w: txt ? undefined : 60,
h: txt ? undefined : 100,
},
pageidx: "-",
imgInfo: img ? {
imgData: img,
imgType: imgType,
} : undefined,
textInfo: txt ? {
text: txt,
fontData: font,
subset: true,
color: "f00",
size: 16,
align: 2,
wMax: 80,
yOffset: 10,
xOffset: 20,
noBreaks: "[あいうえおA-Za-z0-9]",
} : undefined,
};
}
}
/** @type {EncryptOption} */
var eopt = undefined;
if(pubcert || upwd){
eopt = {
mode: parseInt(document.getElementById("mode").value),
permissions: [],
};
Array.from(document.getElementsByName("perms")).forEach((a_chk) => {
if(!a_chk.checked){
eopt.permissions.push(a_chk.value);
}
});
if(pubcert){
eopt.pubkeys = [{
c: pubcert,
}];
}else if(upwd){
eopt.userpwd = upwd;
}
}
/** @type {Uint8Array} */
var u8dat = null;
if(sopt){
/** @type {Zga.PdfSigner} */
var ser = new Zga.PdfSigner(sopt);
u8dat = await ser.sign(pdf, eopt);
}else if(eopt){
/** @type {Zga.PdfCryptor} */
var crypr = new Zga.PdfCryptor(eopt);
/** @type {PDFLib.PDFDocument} */
var pdfdoc = await crypr.encryptPdf(pdf);
u8dat = await pdfdoc.save({"useObjectStreams": false});
}else{
alert("Nothing to do.");
return;
}
document.getElementById("download").download = "test_test.pdf";
document.getElementById("download").href = window.URL.createObjectURL(new Blob([u8dat], {"type" : "application/pdf"}));
document.getElementById("download").click();
}
function test(){
testMe().catch((err) => {
console.error(err);
alert(err.message);
});
}
function clearFiles(){
["fff","kkk","img","font","pubcert"].forEach((a_id) => {
document.getElementById(a_id).value = "";
});
}
function changeSperm(){
/** @type {Element} */
var sel = window.event.currentTarget || window.event.srcElement || window.event.target;
/** @type {Element} */
var spn = document.getElementById("spcmt");
switch(sel.value){
case "1":
spn.innerText = "No changes to the document are permitted; any change to the document invalidates the signature.";
break;
case "2":
spn.innerText = "Permitted changes are filling in forms, instantiating page templates, and signing; other changes invalidate the signature.";
break;
case "3":
spn.innerText = "Permitted changes are the same as for 2, as well as annotation creation, deletion, and modification; other changes invalidate the signature.";
break;
default:
spn.innerText = "";
break;
}
}
</script>
<style>
body {
line-height: 1.5em;
}
span.header {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<label>pdf </label><input type="file" id="fff" /><br />
<hr />
<span class="header">Sign the PDF:</span><br />
<label>certificate </label><input type="file" id="kkk" /><br />
<label>passphrase </label><input type="password" id="pwd" /><br />
<label>signature image </label><input type="file" id="img" /><br />
<label>signature text </label><input type="text" id="txt" /><br />
<label>text font </label><input type="file" id="font" /><br />
<label>left </label><input type="text" id="drawx" value="25" /><br />
<label>permission </label>
<select id="sperm" onchange="changeSperm()">
<option value="0">No DocMDP</option>
<option value="1">DocMDP pattern 1</option>
<option value="2">DocMDP pattern 2</option>
<option value="3">DocMDP pattern 3</option>
</select>
<span id="spcmt"></span><br />
<label>reason </label><input type="text" id="tReason" value="I have a test reason." /><br />
<label>location </label><input type="text" id="tLocation" value="I am on the earth." /><br />
<label>contact </label><input type="text" id="tContact" value="zga@zga.com" /><br />
<hr />
<span class="header">Encrypt the PDF:</span><br />
<label>encryption </label>
<select id="mode">
<option value="0">RC4-40</option>
<option value="1">RC4-128</option>
<option value="2">AES-128</option>
<option value="3">AES-256</option>
</select><br />
<label>user password </label><input type="password" id="upwd" /><br />
<label>public certificate </label><input type="file" id="pubcert" /><br />
<label>permissions: </label><br />
<input type="checkbox" id="pCopy" name="perms" value="copy" checked><label for="pCopy">"copy": Copy text and graphics from the document. (Only valid on public-key mode)</label><br />
<input type="checkbox" id="pPrint" name="perms" value="print" checked><label for="pPrint">"print": Print the document.</label><br />
<input type="checkbox" id="pModify" name="perms" value="modify" checked><label for="pModify">"modify": Modify the contents of the document by operations other than those controlled by 'fill-forms', 'extract' and 'assemble'.</label><br />
<input type="checkbox" id="pCopyExtract" name="perms" value="copy-extract" checked><label for="pCopyExtract">"copy-extract": Copy or otherwise extract text and graphics from the document.</label><br />
<input type="checkbox" id="pAnnotForms" name="perms" value="annot-forms" checked><label for="pAnnotForms">"annot-forms": Add or modify text annotations, fill in interactive form fields, and, if 'modify' is also set, create or modify interactive form fields (including signature fields).</label><br />
<input type="checkbox" id="pFillForms" name="perms" value="fill-forms" checked><label for="pFillForms">"fill-forms": Fill in existing interactive form fields (including signature fields), even if 'annot-forms' is not specified.</label><br />
<input type="checkbox" id="pExtract" name="perms" value="extract" checked><label for="pExtract">"extract": Extract text and graphics (in support of accessibility to users with disabilities or for other purposes).</label><br />
<input type="checkbox" id="pAssemble" name="perms" value="assemble" checked><label for="pAssemble">"assemble": Assemble the document (insert, rotate, or delete pages and create bookmarks or thumbnail images), even if 'modify' is not set.</label><br />
<input type="checkbox" id="pPrintHigh" name="perms" value="print-high" checked><label for="pPrintHigh">"print-high": Print the document to a representation from which a faithful digital copy of the PDF content could be generated. When this is not set, printing is limited to a low-level representation of the appearance, possibly of degraded quality.</label><br />
<hr />
<input type="button" value="test" onclick="test()" />
<input type="button" value="clear files" onclick="clearFiles()" />
<a id="download" href="#" download="" style="display: none;" target="_blank">dummy</a>
</body>
</html>