I would like to use a pdfform.js library(package) within react app. I have tried by using the npm pdfform but no luck.
Any help is much appreciated.
https://github.com/phihag/pdfform.js
Here is a working demo, maybe it will help you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pddform.js demo</title>
<link rel="stylesheet" href="https://phihag.github.io/pdfform.js/docs/demo.css" />
</head>
<body>
<div class="error"></div>
<form class="url_form">
<div>Upload a PDF form file: <label><input type="file" name="file" /></label></div>
<label>or download one: <input type="text" size="40" value="Spielberichtsbogen_2BL.pdf" name="url" /><button role="submit">Download</button></label>
</form>
<form class="cur_file"></form>
<form class="lib_form">
PDF library:
<label><input type="radio" name="pdflib" value="minipdf" checked="checked" />minipdf</label>
<label><input type="radio" name="pdflib" value="pdf.js" />PDF.js</label>
</form>
<form class="fill_form"><button class="fill" disabled="disabled">Fill and download PDF</button></form>
<form class="list_form">
</form>
<div class="loading">Loading (this may take a while since PDF.js is gigantic)</div>
<!-- In a real-life scenario, you want to chose EITHER minipdf (smaller) -->
<script src="https://phihag.github.io/pdfform.js/minipdf.js"></script>
<!-- .. OR pdf.js (huge, but better compatibility).
pdf.worker.js is slightly modified to export the actual classes we care about -->
<script src="https://phihag.github.io/pdfform.js/customlibs/pdf.worker.js"></script>
<script src="https://phihag.github.io/pdfform.js/minipdf_js.js"></script>
<!-- pako and pdfform.js are required either way -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.3/pako.min.js" integrity="sha256-X7u/eQo6oIgWqc5jOmTjQn3loM8Lse0ock76Gkkn/Ro="
crossorigin="anonymous"></script>
<script src="https://phihag.github.io/pdfform.js/pdfform.js"></script>
<!-- FileSaver.js is just needed for the demo, although you'll probably use it in some form as well -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
<script src="https://phihag.github.io/pdfform.js/docs/demo.js"></script>
</body>
</html>
Related
I want to use JQuery and JSEncrypt in my Thymeleaf Page.
From researching I've found that I can achieve this with including the .js files of the libs that are saved in my /static/js/ folder of the spring boot application.
I get the following error:
FolderTree:
My HTML looks like this:
<html ..>
..
..
<link href="../static/css/layout.css" th:href="#{css/layout.css}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" th:src="#{js/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="#{js/jsencrypt.min.js}"></script>
<script type="text/javascript">
function encryptPw() {
var encPw = $('#password').val();
console.log(encPw);
}
</script>
</head>
<body>
<form ...>
...
...
<p>
<label for="password" class="login-hidden-label">Passwort</label>
<input type="password" id="password" name="password" class="login-input-field" placeholder="Passwort" required>
</p>
<button class="login-accept-button" onclick="encryptPassword()" type="submit">Anmelden</button>
</body>
</html>
Solved this by allowing all Requests in the spring web security for
/js/**
in my antMatchers.
httpSecurity.antMatchers("/js/**").permitAll();
fixes it.
Okay, so when I follow the directions here for getting started with Materialize CSS, my input form always turns out like this:
My current index.html file is this:
<!DOCTYPE html>
<html>
<head>
<title>IRS</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="node_modules/materialize-css/css/ghpages-materialize.css">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="node_modules/materialize-css/js/materialize.js"></script>
</head>
<body>
<div class="input-field">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
</body>
</html>
My electron version is 1.6.6 and node is at 6.10.3
Add "active" class to the tag and try
<div class="input-field">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name" class="active">First Name</label>
</div>
if you want only label animation, remove the placeholder for the <input> tag
Hope it works..
For anyone else with issues using materialize css with electron, here is how to get it to work the right way:
<script type="text/javascript" src="js/hammer.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
The issue is materialize.min.js is requiring hammer.min.js so you need to add it to your project and call it before materilize.min.js
I'm trying to make some app in TideSDK using Semantic-UI (http://semantic-ui.com/). When I open my page in Chrome it works correctly:
chrome http://krakow45.pl/test/chrome.png
but when I'm launching my code with TideSDK it looks like:
tide http://krakow45.pl/test/tide.png
How you can see, some elements are missing and it isn't work correctly.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<!-- JavaScript includes -->
<script src="vendor/jquery.js"></script>
<script src="js/app.js"></script>
<script src="vendor/semantic/semantic.js"></script>
<!-- /JavaScript includes -->
<!-- CSS includes -->
<link rel="stylesheet" type="text/css" href="vendor/semantic/semantic.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- /CSS includes -->
<title>xxx</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- PAGE: NEW_REPORT -->
<div id="NEW_REPORT_fieldsContainer" class="ui segment">
<div class="ui input">
<input id="NEW_REPORT_firstName" type="text" placeholder="Imię">
</div><br /><br />
<div class="ui input">
<input id="NEW_REPORT_lastName" type="text" placeholder="Nazwisko">
</div><br /><br />
<div class="ui left icon input">
<input id="NEW_REPORT_date" type="text" placeholder="26/03/2015">
<i class="calendar icon"></i>
</div><br /><br />
<div id="NEW_REPORT_buttonNext" class="ui animated button">
<div class="visible content">Dalej</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
</div>
<!-- /PAGE: NEW_REPORT -->
</body>
Remember that TideSDK uses an old version of webkit. I'm pretty sure you'll have to prefix your CSS3 rules (-webkit-). But also keep in mind that all the CSS3 rules cannot be used, but for now I haven't encounter major CSS3 issues.
Just one thing is bothering me, it's the old developper console..
TideSDK seems not to be that amazing choice to develop those apps anymore :( Sadly after they started to develop TideKit, no support was given.
This last version should support all CSS 3 elements but it actually doesn't.
Glad you found your way out :)
I am trying to get search up and running on my website. Right now the search either does nothing or spinner endlessly spins and nothing loads or I get "ERROR LOADING PAGE." I feel that this may be due to a jquery and jquery mobile conflict.
jquery.min.js is version 1.11.1
jquery mobile is 1.4.3
Hope you can help!
Here is the index.html
<!DOCTYPE HTML>
<html>
<head>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQueryMobile -->
<script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div class="block">
<form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off">
</form>
</div>
</div>
</body>
</html>
This is the search.html (as it states to do in tipue docs)
<!DOCTYPE HTML>
<html>
<head>
<title>TEST</title>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQueryMobile -->
<script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch_set.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch_content.js></script>
<link rel="stylesheet" type="text/css" href="tipuesearch/tipuesearch.css">
<script type="text/javascript" src="tipuesearch/tipuesearch.js"></script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div data-role="content">
<div class="block" ><form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off" required placeholder="Enter manufactuer or part number" >
</form>
</div> </div>
<div id="tipue_search_content"></div>
</div>
<script>
$(document).ready(function() {
$('#tipue_search_input').tipuesearch({
'show': 6
});
});
</script>
</body>
</html>
In case anyone is wondering this was simply a slight lack of JQM experience. Disabling ajax on the form solved the problem ()
Hi I have been using mechanize and python to try and upload a file to a website, so far Ive been succesfull but im stuck at the upload page. I know mechanize does not work with JavaScript but I was wondering if anyone knows a way that I could pass a file directory to the form to upload it, any help will be greatly appreciated.
<link rel="stylesheet" type="text/css" href="cssABI.css" />
<link rel="stylesheet" type="text/css" href="ABIDynamicMenus.css" />
<html>
<head>
<title>File Upload Provided by Aeries Browser Interface</title>
<script language="JavaScript" src="ABIjava.js"></script>
</head>
<body vlink="Blue">
<form name="frmValues" id="frmValues" method="post" action="FileUpload/Default.aspx?cache=5%2F19%2F2011+5%3A02%3A22+PM&LoadID=txtUploadedFileID&LoadNM=">
<input type="hidden" name="UserType" id="UserType" value="P" />
<input type="hidden" name="username" id="username" value="69297" />
<input type="hidden" name="number" id="number" value="200673" /
<input type="hidden" name="Check1" id="Check1" value="c91097e8cad20b230024a190d8867b3c65aceaaef6297c3788dd5b017bb89b2b" />
<input type="hidden" name="Check2" id="Check2" value="163f01c431991367a988152a35b947fa339359a7124c8fe9bc390d9c06f48a16" />
</form>
<script type="text/javascript">document.getElementById('frmValues').submit();</script>
</body>
</html>
Mechanize handles file uploads to forms like this:
form.add_file(open("NAME/LOCATION OF FILE"), "MIME TYPE", "NAME OF FILE")
br.form.add_file(open("file.txt"), "text/plain", "file.txt")