I am having code as below
<HTML>
<HEAD>
<TITLE>jsPDF HTML Example with html2canvas for Multiple Pages PDF</TITLE>
<style>
#doc-target {
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
color: #000;
line-height: 1.6em;
margin: 0 auto;
}
#outer {
padding: 50px;
border: 1px solid #000;
margin: 0 auto;
font-size: 14px;
width: auto;
height: 100%;
}
</style>
</HEAD>
<BODY>
<div id="container">
<p>
<button class="btn" onclick="generatePdf()">Download PDF</button>
</p>
<div id="outer">
<div id="doc-target">
<h1>jsPDF HTML Example</h1>
<div id="lipsum">
<div class="col-md-10 col-sm-8 col-sx-12">
<div class="row">
<div class="col-md-4 ">
<label for=""><strong>Full Name</strong> </label>
<p class="ng-binding">sandeep</p>
</div>
<div class="col-md-4 ">
<label for=""><strong>Marital Status</strong> </label>
<p class="ng-binding">SINGLE</p>
</div>
<div class="col-md-4 ">
<label for=""><strong>Phone Number</strong> </label>
<p class="ng-binding">8798798798</p>
</div>
<div class="col-md-4 ">
<label for=""><strong>Date of Birth</strong> </label>
<p class="ng-binding">10/10/2004</p>
</div>
</div>
</div>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
<p>1. All the
particulars/details filled in/provided in the Electronic Customer Application Form ("EAF")
bearing the above mentioned Reference Number have been entered by me/us. I verify and
confirm that
all the information and particulars entered/recorded in the EAF are true and correct and I
have not
withheld any information required for opening the Instant Current Account ("Current
Account").</p>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
// https://html2canvas.hertzen.com/configuration
// https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html
// https://artskydj.github.io/jsPDF/docs/jsPDF.html
window.jsPDF = window.jspdf.jsPDF;
function generatePdf() {
let jsPdf = new jsPDF('p', 'pt', 'a4');
var htmlElement = document.getElementById('doc-target');
// you need to load html2canvas (and dompurify if you pass a string to html)
const opt = {
callback: function (jsPdf) {
jsPdf.save("Test.pdf");
// to open the generated PDF in browser window
// window.open(jsPdf.output('bloburl'));
},
margin: [50,50,50,50],
autoPaging: 'text',
html2canvas: {
allowTaint: true,
dpi: 300,
letterRendering: true,
logging: false,
scale: .6
}
};
jsPdf.html(htmlElement, opt);
}
</script>
</BODY>
</HTML>
But my issue is after generating into pdf the text toward right corner is breaking somewhere and few words are missing from the next line. Kindly help to how to set the functionality for this one.
I have tried html2pdf library but the facing issue with the file size is becoming large. My pdf might consists more than 5 page.
Related
I implement Windows authentication for a web app that is only used internally. This way the users should not need to log into the app, but already be authenticated when they log in to Windows.
I need to give to the users access to different parts of the app according to the group they belong to and according to the group's permissions on Active Directory.
I was able to do it on different Views by using:
[Authorize(Roles = #"Domain\Group")]
How can I do the dame thing on the same View- to give access to different parts of the View according to the user's group permission in Active Directory.
<div class="row">
<div class="col-md-4">
<h2>User Name: #User.Identity.Name</h2>
<p>
Test site with Active Directory
Only users that belong to Group 1 should see this section
</p>
<p></p>
</div>
<div class="col-md-4">
<label>Only users that belong to Group 2 should see this section</label>
</div>
<div class="col-md-4">
<label>Only users that belong to Group 3 should see this section</label>
</div>
You can use C#/Razor conditional statements in your view to vary the content according to which group(s) the user belongs to, something like this:
<div class="row">
<div class="col-md-4">
<h2>User Name: #User.Identity.Name</h2>
<p>
Test site with Active Directory
#if (User.IsInRole("Group1")) {
Only users that belong to Group 1 should see this section
}
</p>
<p></p>
</div>
#if (User.IsInRole("Group2")) {
<div class="col-md-4">
<label>Only users that belong to Group 2 should see this section</label>
</div>
}
#if (User.IsInRole("Group3")) {
<div class="col-md-4">
<label>Only users that belong to Group 3 should see this section</label>
</div>
}
I have an input that will display data in model. There supposed to be 2 ways to access this form. Either by entering ID no at the form before, so
the name displayed here, or without entering ID no, which means it is only a blank textbox. I successully retrieved the value from model where the
value is displayed inside the textbox. The problem is when the form is access without model. Textbox are not shown. It only displayed the label.
I am not sure why but i think it is maybe because the input value are assign to model. All i need is a textbox so user can input the data.
<div Class="form-group">
<Label Class="control-label col-md-4">Appointment Start</Label>
<div Class="col-sm-8">
#For Each Item In Model
#<input type="text" name="name" Class="form-control" value="#Html.DisplayFor(Function(modelItem) Item.name)">
Next
</div>
</div>
I am using Grails 2.4.3 and Spring Security spring-security-core:2.0-RC5. I can easily log in with this using username and password. Now there is a requirement that I will have to log in with pin number not username and password.
There will be no username, password field in login form. Now this is the problem. I could not try it because I have no idea how to do it instead of username and password. Here I can share only my login form with username and password field which is working as below:
<form action='${postUrl}' method='POST' id='loginForm' class='cssform' autocomplete='off'>
<div>
<span><label>Username</label></span>
<span><input type="text" class="textbox" name='j_username' id="active"></span>
</div>
<div>
<span><label>Password</label></span>
<span><input type="password" name='j_password' class="password"></span>
</div>
<div class="sign">
<div class="submit">
<input type='submit' id="submit" value='${message(code: "springSecurity.login.button")}'/>
</div>
<div class="clear"> </div>
</div>
</form>
Well everything you want to alter lies in DefaultSecurityConfig.groovy under the plugin.
I remember doing this for email Id and had overridden several security configurations.
In order to set j_username form field to different name you may override
grails.plugin.springsecurity.apf.usernameParameter=zipcode //your domain field name
and to change the field which needs to be considered as user name from Domain class by overriding following in security config:
grails.plugins.springsecurity.userLookup.usernamePropertyName='zipcode'
Remember to dig into DefaultSecurityConfig.groovy file for any other such customization.I would suggest creating a separate Security config file and there override any configuration if required.
I created a register form and I am allowing users to select their gender and the gender the user is interested in.
What I need help with is connecting the dots. For example if user selects their gender as female and then for gender interested in female is selected, then it should enter the user as gay for the sexuality attribute.
If the user selects their gender as female and they select both male and female for interested in then the user should be saved to the database as bisexual for their sexuality.
register form:
<div class="field">
<%= f.label "Interested in" %><br />
<div class="check-gender">
<div class="check check-male" style="margin: 0">
<input id="user_sexuality_male" name="user[sexuality]" type="checkbox" value="Male" class="jqTransformHidden">
<label for="user_sexuality_male">Male</label>
</div>
<div class="check check-female" style="margin: 0">
<input id="user_sexuality_female" name="user[sexuality]" type="checkbox" value="Female" class="jqTransformHidden">
<label for="user_sexuality_female">Female</label>
</div>
</div>
</div>
</div>
That logic would have to be written in the controller. A simple if statement, if gender == interest then orientation = gay else orientation = straight. Access the params in the controller to get that. If you want to show the answer in real time (withouth refreshing the page) then you need to do this in javascript.
Thanks for any help you can provide! I have a Ruby on Rails and Google Maps API V3 mapping application where people can use a form to enter a starting address, waypoints, and an ending address. They click Submit, and the form is hidden by jQuery. In its place appears a Google Map with the driving route and directions. On this same view, the user can enter a name for the map.
My next goal is to save the map information to a database. I've already gotten most of the way there, but I've run into a problem. I want to save the name of the map and the starting, ending, and waypoint entries from the form. However, when I wrap the form around the entire page, users who click "Submit" to view their map automatically save their form to the database. This is a problem because they don't have a chance to name or view their map before saving.
How should I structure the form so that the Google Map submit button doesn't save the form but I can still capture information from the start, waypoints, and end?
CODE FOR MY PAGE:
<!-- This is the map route page -->
<div id="map-route-page">
<div id="map_canvas"></div>
<form id="createaMap" action="/newsavedmaps" method="post">
<input id="savemap_name" name="newsavedmapname" size="30" type="text" value="New Map"></p>
<input type="submit" id="savethismap" value="Save Map">
</div>
</div>
<!-- End of map route page -->
<!-- This is the form page -->
<div id="map-form-page">
<div id="startingpoint">
<b>Start</b>
<input id="startinput" type="text" name="starthere" size="56" value="500 Main Street, CITY, STATE, ZIP"></p>
</div>
<div id="stops">
<div id="multiselect">
<select multiple id="select1">
<option value="500 Main Street, CITY, STATE, ZIP">Address1</option>
<option value="500 Main Street, CITY, STATE, ZIP">Address2</option>
<option value="500 Main Street, CITY, STATE, ZIP">Address3</option>
</select>
</div>
</div>
<div id="endingpoint">
<b>End</b>
<input id="endinput" type="text" name="endhere" size="56" value="500 Main Street, CITY, STATE, ZIP"></p>
</div>
<input type="submit" onclick="calcRoute();" id="showmapview" value="Show Map">
</div>
</form>
<!-- End of form page -->
</body>
You shouldn't be using a submit button for your google maps function. Because the button is sitting within a <form> it's trigger the call to the server. Strip off type="submit".
It's also looks like you're trying to do two forms, the first for submission to the server, the second for google maps function. If that's the case, I'd move the </form> tag above the <!-- End of map route page --> comment.