I just dowloaded the newset version of gembox document in order to convert ah html file into PDF.
It seems to be working, but the resulting PDF is losing some information.
Here is what the HTML looks like:
<html>
<head>
<style>
.main-container {
width: 383.62px;
height: 576.95px;
text-align: center;
padding: 96px 48px;
font-family: Verdana;
}
.code {
font-size: 25px;
font-weight: bold;
letter-spacing: 1px;
}
.mrg-btm {
margin-bottom: 8px;
}
.name-and-code {
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
}
.flex-div {
display: flex;
flex-direction: row;
width: 100%;
}
.distance-one {
width: 50%;
text-align: left;
font-size: 14px;
}
.distance-two {
width: 50%;
text-align: right;
font-size: 14px;
}
.font-bold {
font-weight: bold;
}
.scadenza {
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
}
.data-scadenza {
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
}
.materiali {
font-size: 24px;
font-weight: bold;
text-align: left;
letter-spacing: 5px;
}
.last-codes {
display: flex;
flex-direction: row;
font-size: 14px;
text-align: left;
font-family: TimesNewRoman;
}
.mrg-btm-two {
margin-bottom: 64px;
}
.mrg-btm-three {
margin-bottom: 16px;
}
.mrg-btm-four {
margin-bottom: 20px;
}
.mrg-rgt-one {
margin-right: 20px;
}
.mrg-rgt-two {
margin-right: 8px;
}
.mrg-rgt-three {
margin-right: 16px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="code mrg-btm">
<label>STM0583A0</label>
</div>
<div class="name-and-code mrg-btm-four">
<label>TUNISI 0583</label>
</div>
<div class="mrg-btm-four">
<img alt='Barcode Generator TEC-IT'
src='https://barcode.tec-it.com/barcode.ashx?data=02329747&code=Code39'/>
</div>
<div class="flex-div mrg-btm">
<label class="distance-one">SqA</label>
<label class="distance-two font-bold">2481m (#13)</label>
</div>
<div class="flex-div mrg-btm-three">
<label class="distance-one">GOMSET1 (#2)</label>
<label class="distance-two">11/10/2022</label>
</div>
<div class="scadenza mrg-btm">
<label>Scadenza</label>
</div>
<div class="data-scadenza mrg-btm">
<label>31/10/2022</label>
</div>
<div class="materiali mrg-btm">
<label>Materiali</label>
</div>
<div class="last-codes mrg-btm-two">
<label class="mrg-rgt-one">RC1812</label>
<label>000331799805</label>
</div>
<div class="last-codes mrg-btm">
<label class="mrg-rgt-two">SB00040A0</label>
<label class="mrg-rgt-two">STR1026420</label>
<label>25/10/2022</label>
</div>
<div class="last-codes">
<label class="mrg-rgt-two">C-1812</label>
<label class="mrg-rgt-three">RC1812</label>
<label>000331799805</label>
</div>
</div>
</body>
</html>
Here is the c# code. I tried several methods but none of them work.
GemBox.Document.ComponentInfo.SetLicense("FREE-LIMITED-KEY");
DocumentModel document = DocumentModel.Load(filenameHtml);
document.Save(path + pdfFilename);
//CODE 2
GemBox.Document.ComponentInfo.SetLicense("FREE-LIMITED-KEY");
string body = File.ReadAllText(filenameHtml);
var htmlLoadOptions = new HtmlLoadOptions();
using (var htmlStream = new MemoryStream(htmlLoadOptions.Encoding.GetBytes(body)))
{
var document = DocumentModel.Load(htmlStream, htmlLoadOptions);
document.Save(path + pdfFilename);
}
I tried also setting up some parameters, but in every test, the size of the area of the HTML was lost, the Times New Roman font as well, and also the flex div spacing some elements.
Here is what the original xml looks like:
And here is the result
What can I change to make the Gembox Document output look like the original?
Related
I want to implement email templates in ckeditor so user can edit their template.Html elements in template should be bind with database fields. Could you please give me a sample example how to create and edit the email templates in ckeditor
I suggest you use The jQuery Adapter, you can read official article first. And then you can pass parameters and use ajax to send a request to get the parameters of the database.
I create a sample email template html file, named aa.html. and I use jquery to local email template. You can see my gif first.
My code structure
Source Code
aa.html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Hi there,</p>
<p>Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tbody>
<tr>
<td align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> Call To Action </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p>Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
<br> Don't like these emails? Unsubscribe.
</td>
</tr>
<tr>
<td class="content-block powered-by">
Powered by HTMLemail.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.14.1/adapters/jquery.js"></script>
<title>Document</title>
<script>
$( document ).ready( function() {
$('textarea#editor1' ).ckeditor();
$.get('aa.htm').done(response=>{CKEDITOR.instances['editor1'].setData(response);}).fail(/** process error here **/);
} );
$('form').ajaxSubmit( {
beforeSubmit: function() {
// The textarea is already updated now and has the same value as the editor, so you can validate it.
}
});
</script>
</head>
<body>
<form>
<textarea cols="80" id="editor1" name="editor1" rows="10" >Lorem ipsum</textarea>
<input type="submit" value="Save">
</form>
</body>
</html>
I am new to nopcommerce,I understood all the basic code flow of nopcommerce.So Now i started replicating plugins (widgets).I created a plugin can install and uninstall but no idea how to create a widget and add it commonly in all pages.what i am trying to achieve is call the iframe component inside the chat bar.I'll add the code of view in this question
Now i added this code in nop.web/shared/_root.cshtml. So now chat bar comes in all pages
<div>
<a class="float" id="button" onclick="openForm()">
<img src="~/files/chatbotv4/VertChat.png" class="my-float">
</a>
<div class="chat-popup" id="myForm">
<div class="chathead">
<div class="btn-close">
<button type="button" class="close" onclick="closeForm()">_</button>
</div>
<div class="btn-max" id="max">
<div type="button" class="fa fa-window-maximize" style="background-color:#16c886; font-size:21px;" onclick="max_chat()">□</div>
</div>
<div class="btn-min" id="min">
<div type="button" class="fa fa-window-restore" style="background-color:#16c886; font-size:21px;" onclick="min_chat()">❐</div>
</div>
</div>
<iframe src='~/files/chatbotv4/botchat.html?name=#customerName&id=#customerId' style='min-width: 100%; width: 100%; min-height: 100%;'></iframe>
</div>
</div>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
document.getElementById("button").style.display = "none";
document.getElementsByClassName("header")[0].style.zIndex = "0";
document.getElementsByClassName("header-menu")[0].style.zIndex = "0";
document.getElementsByClassName("footer-lower")[0].style.zIndex = "-1";
//$(".header").css("csstext", " z-index: 0 ;");
//$(".header-menu").css("csstext", " z-index: 0;");
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("button").style.display = "block";
document.getElementsByClassName("header")[0].style.zIndex = "1";
document.getElementsByClassName("header-menu")[0].style.zIndex = "1";
document.getElementsByClassName("footer-lower")[0].style.zIndex = "1";
}
function max_chat() {
document.getElementById("max").style.display = "none";
document.getElementById("min").style.display = "block";
// $(".chat-popup").css("cssText", " width: 50%;");
document.getElementsByClassName("chat-popup")[0].style.width = "50%";
}
function min_chat() {
document.getElementById("min").style.display = "none";
document.getElementById("max").style.display = "block";
document.getElementsByClassName("chat-popup")[0].style.width = "30%";
}
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
/* The popup chat - hidden by default */
.chat-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 1;
height: 100%;
width: 30%;
}
iframe {
background-color: white;
min-height: 95% !important;
min-width: 100%
}
.btn-close {
padding-left: 95%;
position: absolute;
z-index: 1032;
}
.close {
background: transparent;
border: none;
}
.float {
position: fixed;
width: 60px;
height: 60px;
bottom: 20px;
right: 20px;
background-color: #0C9;
//color:#FFF;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
z-index: 1030;
}
.my-float {
margin-top: 1px;
margin-left: auto;
height: 58px;
width: 58px;
}
.btn-max {
padding-left: 87%;
position: absolute;
margin-top: 0.2%;
z-index: 1032;
cursor: pointer;
}
.btn-min {
padding-left: 90%;
position: absolute;
margin-top: 0.2%;
z-index: 1032;
display: none;
cursor: pointer;
}
.chathead {
height: 5%;
width: 100%;
position: relative;
background-color: #16c886;
}
</style>
now i want to add it as a seperate widget.
The widget is a defined area where a developer can inject his/her expected functionality. There are already a lot of widgets define by the core team, one of a good example of the widget plugin is NivoSlider. In your plugin you have to implement IWidgetPlugin and need to define expected viewcomponent name of your plugin at "GetPublicViewComponent" method and the name of the widget of nopcommerce at "GetWidgetZones" method where you want to show the viewcomponent at a public site. If you want to know more about the widget plugin, you can visit DEVELOP AND UNDERSTAND WIDGET PLUGIN IN NOPCOMMERCE 4.10 WITH REAL-TIME COMMUNICATION
Every time I try to replace the site-title with a banner image, the formatting messes up and goes wonky. Usually all the links that should be aligned at the bottom of the header float up to the top and get messed up, has anyone encountered this before and know how to fix it?
Here is the header I am using:
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("FantasiTrade", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Browse Units", "", new { area = "", controller = "Units"})</li>
#{ if (User.Identity.Name != null) { if (User.Identity.Name != ""){
<li>#Html.ActionLink("Sell Unit", "Create", new { area = "", controller = "ActiveTrades" })</li>
<li>#Html.ActionLink("Your Profile", "profile", new { user = User.Identity.Name, area = "", controller = "ActiveTrades"})</li>}}}
</ul>
</nav>
</div>
</div>
</header>
I want the "menu" list of links to stay aligned at the bottom of the header rather than floating to the top when I replace:
<p class="site-title">#Html.ActionLink("FantasiTrade", "Index", "Home")</p>
With:
<img src = "mybanner.jpg" />
Thanks to anyone that can help me out!
CSS as requested, I THINK these are the relevant parts, the actual file is massive, let me know if you want to see it all:
/* site title
----------------------------------------------------------*/
.site-title {
color: #000000;
font-family: "Franklin Gothic Medium", Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 3em;
margin: 0px;
margin-left: 25px;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #000000;
outline: none;
text-decoration: none;
}
/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login a.username {
background: none;
margin: 0;
padding: 0;
text-decoration: underline;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
try <img src = "mybanner.jpg" /> it migth also be an unclosed tag somewhere although your header looks clean apart from unclossed double quotes.
Sample string:-
<div class="ui-droppable" id="ParentDIV" style="width: 286pt; height: 212pt; background-color: #00752d; background-image: none;">
<div class="be-canvas-grid" style="background-image: none">
<div style="width: 200px; height: 50px; top: 77px; left: 162px; font-family: Arial; font-size: 12pt; color: rgb(0, 0, 0); overflow: hidden;" data-uid="2" class="be-component be-text ui-draggable ui-droppable">
<span>hello from simple text</span>
</div>
<div style="width: 161.567px; height: 39.5667px; top: 127px; left: 172px; font-family: Arial; font-size: 12pt; color: rgb(201, 87, 201); overflow: hidden;" data-uid="3" class="be-component be-text ui-draggable ui-droppable">
<span>{[C-FULLNAME:LC]}</span>
</div>
<div style="width: auto; height: auto; top: 196px; left: 216px;" data-uid="4" class="be-component be-image ui-draggable">
<img src="https://localhost/a/images/BarcodeType1.jpeg" data-qrstub="" alt="">
</div>
<div style="width: 200px; height: 50px; top: 6px; left: 12px; font-family: Arial; font-size: 12pt; color: rgb(201, 87, 201); overflow: hidden;" data-uid="5" class="be-component be-text ui-draggable ui-droppable">
<span>asd</span>
</div>
</div>
</div>
I want to pull the ParentDIV elements's style properties i.e. width and height. Then I want to update the width and height css properties with my values. The order of height and width properties in the style tag of ParentDIV may get changed also.
Please suggest the regex. I would be making this code changes in C#.net.
Regex expression can build with the help of online tool http://www.gskinner.com/RegExr/.
I'm not able to align the label and Ajax Rating Control in a single line.
Code is,
<label class="Informlabel" style="font-size: 13px; font-weight: bold; float: left;
width: 100%; overflow: auto; display: block; vertical-align: top;">
Rating :</label>
<asp:Rating ID="Rating1" runat="server" MaxRating="5" CurrentRating="0" CssClass="ratingStar"
StarCssClass="ratingItem" WaitingStarCssClass="Saved" FilledStarCssClass="Filled"
EmptyStarCssClass="Empty" AutoPostBack="false">
</asp:Rating>
Here is the css of Rating tool
li
{
clear:both;
margin-bottom:1em;
border-bottom:1px solid #eee;
}
/* ****************** RatingStar ****************** */
.ratingStar
{
white-space:nowrap;
margin:1em;
height:17px;
vertical-align:top;
}
.ratingStar .ratingItem {
font-size: 0pt;
width: 20px;
height: 16px;
margin: 0px;
padding: 0px;
display: inline-block;
background-repeat: no-repeat;
cursor:pointer;
}
.ratingStar .Filled {
background-image: url(Images/Rating/Selected.gif);
}
.ratingStar .Empty {
background-image: url(Images/Rating/Empty.gif);
}
.ratingStar .Saved {
background-image: url(Images/Rating/Hover.gif);
}
Can you Help me out ??
It's because you have display:block on your label, it should be display: inline-block; same for the output of Ajax Rating Control