For a school project I have to print webpages to PDF in C#.
I can do this manually by pressing ctrl+p in chrome en choosing save as pdf.
I want to do it with my program because I have to print 30000 web pages.
An example of a webpage I have to print is "http://prf.icecat.biz/?shopname=openIcecat-url&smi=product&vendor=HP&prod_id=D8G49AAE&lang=nl"
I'm new around here so if I didn't give enough information, please ask.
The code also looks quite special to me, it is:
<!DOCTYPE html>
<html>
<body>
<div id="light_wrapp">
<div id="light_title_description">
This is a demo of a seamless insert of an Icecat LIVE product data-sheet in your website. Imagine that this
responsive data-sheet is included in the product page of your webshop. How to integrate Icecat LIVE JavaScript.
</div>
</div>
<div id="loadLiveIcecat"></div>
<input type="hidden" id="liveIcecatData"
data-icecat_id=""
data-brand="HP"
data-part_code="D8G49AAE"
data-ean_upc=""
data-language_code="nl"
datasignature="
gn4vxXU3uI7JPKzL1RNoPAFGPRYdNmwmWJ5FeQj1J45Ba2qiaVYgoE%2FEXwpjaBSdKTrk%2F
%2ByI0AiT5CW1bk3r6SmHY%2FdUuQN3fss8h0se8w9mSw7FDr8SWvqoawB3m69lt6Ske4n%2F01IpEFO9Y
QEVpW9kFZRPWH%2Fuy0yuIbDdm4pd7%2BT9XbPFEk0fKGRH57Nkj5%2FvNEiMW1JhdzV86rJR5ME11j3P
0PJhBMGT1tm2AA0uiDILSNuOwnTWc2WVFEHzC4xr8Q591rPC%2B%2Bue230VowhLLmZTczheEGWrTCA
Wl%2B5Fj4qeLjLe3qTq1MxQaqSIUJXG5rz0BdR%2Fe8ZwkMNAgQ%3D%3D"
data-timestamp="1453663924"
data-shopname="openIcecat-url"
>
</body>
</html>
<link rel="stylesheet" type="text/css" href="/themes/basic/css/icecat/demo.css" >
<script type="text/javascript" src="https://live.icecat.biz/js/live-current.js"></script>
<script type="text/javascript" src="http://prf.icecat.biz/themes/basic/js/icecat/live/init.js"></script>
You can try using ABCpdf,a third-party library.
ABCpdf api document
It make webpag2Pdf easy.
Doc theDoc = new Doc();
theDoc.AddImageUrl("http://www.google.com/");
theDoc.Save(Server.MapPath("htmlimport.pdf"));
theDoc.Clear();
Related
I am trying to create a C# Web Application and moved my html code to the .aspx file. I have imported highcharts in and added Angular JS scripts. Everything seems to be working except the highchart. It seems to work fine on the .html file when I test it but is it not working on the .aspx file.
Block error:
Uncaught TypeError: angular.module(...).component is not a function
at highcharts-ng.js:28
at highcharts-ng.js:227
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title></title>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="js/popper.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="js/highcharts-ng.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/app.js"></script>
</head>
Above is the order of scripts I have added in. Everything looks to be working except my highchart.
<div class="tab-pane active" id="chart" >
<div class="row">
<highchart id="chart1" config="chartConfig" class="span9"></highchart>
</div>
</div>
I am getting a warning: 'Validation (HTML5): Element 'highchart' is not supported'
Angular JS (app.js) snippet:
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope, $http ) {}
I seem to have migrated everything over to the new application but for some reason my chart is not showing the way it is on the .html file
One thing to note Angular JS is working because i have the following code on my web form and this is working and showing me the chart config. Its just not displaying the chart:
<div class="row-fluid" >
<pre data-ng-show="!prettyJSON">
{{ chartConfig }}
</pre>
</div>
debugged highcharts-ng-js and its erroring:
angular.module('highcharts-ng', [])
.component('highchart', { ///ERROR HERE
bindings: {
config: '=',
changeDetection: '<',
disableChangeDetection: '<'
},
controller: H
saying highchart is not a function
Example code for debugging: https://github.com/brpyne/AngularHighcharts I have html file similar to this github and I am trying to move it over to A C# Web Form Application! I have moved my html code into an aspx file. The same happens issue happens on my side - it doesnt recognise the highchart tag!
The code itself is working correctly, everything is caused by incorrect imports. I have noticed that you are trying to import files that don't exist in the Scripts folder (for example Angular). But that is not the only problem, there is something wrong with the Highcharts v.2.2.5 its a really old release (the current version is 8.2.0) so I would suggest to try the newer version.
I was able to successfully run your project after updating the imports and the Highcharts version.
<head>
<title>Angular Highcharts</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="Scripts/highcharts/highcharts.src.js"></script>
<script src="Scripts/angular-highcharts.js"></script>
</head>
Live demo:
https://jsfiddle.net/BlackLabel/ew0p568u/
Suppose my website has source code:
<!DOCTYPE html>
<html>
<head>
<title>Wow</title>
</head>
<body>
<div id="hello">
</div>
<script type="text/javascript">
function simple()
{
$("#hello").append("<p>Hello</p>");
}
</script>
</body>
</html>
I want a C#/asp.Net method to extract it's source code as follows:
<!DOCTYPE html>
<html>
<head>
<title>Wow</title>
</head>
<body>
<div id="hello">
</div>
<p>Hello</p>
</body>
</html>
string src=new WebClient().DownloadString("http://mywebsite.com")
doesn't help as it extracts the raw html code along with the javascript, same as the source code.
From looking at the comments above I understand that you're looking for the scripts to be executed before you get the final HTML DOM.
What you need is a JavaScript engine to run the scripts, the basic mechanics of a browser.
Depending on your needs, you can either implement this yourself with V8 (Chrome's JavaScript engine) or SpiderMonkey (Mozilla's JavaScript engine) or use one of the two popular headless browser frameworks: PhantomJS and CasperJS. Using them will also cover all your future AJAX needs should you have any.
Page created using ASP .NET MVC 2 takes 1.7 sec to load.
It contains 13 js files as shown below. Firebug shows that every js file load returns 304 response but since there are 13 files it may increace page load time a lot.
Chrome audit red alert recomments to combine js files.
How to combine them to single file using ASP.NET MVC 2 automatically or other way to decrease load time ?
There should be separate js files in project to allow to replace them but those should delivered
as single js file probably.
jqgrid, jquery, jquery-ui, tinymce and some jquery plugin js files are used as shown below.
Visual Web Developer Express 2010 is used. Application is running under Mono 2.10/Apache and under Windows/IIS
site.master contains:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1" />
<link rel="stylesheet" href="../../themes/redmond/jquery-ui-1.8.12.custom.css" type="text/css" />
<link href="../../Scripts/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<link href="../../Content/Css/Site.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<script type="text/javascript">
"use strict";
var BASE_URL = '<%= ResolveUrl("~/") %>';
</script>
<script src="<%= Url.Content("~/Scripts/jquery/jquery-1.7.1.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui-git.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/i18n/jquery.ui.datepicker-et.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.contextmenu-fixed2.js")%>" type="text/javascript"></script>
<% if (CurUser.GetLanguage() == "EST")
{ %>
<script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-et.js")%>" type="text/javascript"></script>
<% }
else
{ %>
<script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-en.js")%>" type="text/javascript"></script>
<% } %>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jquery.jqGrid.src-multiselect1-deleteandsortpatches.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jQuery.jqGrid.dynamicLink.js")%>"></script>
<script src="<%= Url.Content("~/Scripts/json2.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.form.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/TinyMCE/tiny_mce_src.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/TinyMCE/jquery.tinymce.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/myscripts.js")%>" type="text/javascript"></script>
<script type="text/javascript">
var
$grid;
$(function() {
"use strict";
<% if (TempData["Message"]!=null) {
setTimeout( function() {
showMessage ( '<%= TempData["Message"] as string %>');
...
Update
I tried Oleg suggestion in answer but got error jQuery is not defined as shown in image below. How to fix this ?
IE console does not show any error.
I want suggest you to make one experiment using the Closure Compiler.
First of all you can try to concatenate all the JavaScript and all inline JavaScript code which you use on the page. You should hold the order of files of cause. It seems to me you will have two version of the results: one with CurUser.GetLanguage() === "EST" and another with CurUser.GetLanguage() !== "EST".
After you will have one JavaScript file you can use the Closure Compiler with a compilation_level of ADVANCED_OPTIMIZATIONS (see here) which can remove all unused JavaScript code. As the result you will get subset of jQuery, jQuery UI and other libraries which you really use on the page. The resulting JavaScript code will be other as on another pages, but it could be very small and could be better optimized as any separate files.
I recommend use head.js.
It really helps you to decrease page load time with using separate .js files. You just include one file with something like that:
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// all done
});
http://combres.codeplex.com/ allows you to keep separate javascript files and to combine and minify at runtime.
Works a real treat.
Looks like they've rolled something similar into asp.net 4.5:
http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
To overcome these type of situation you have many techniques. Some of are :
Page Specific JS : Try to add javascript files according to the requirement. Do not add any unnecessary JS which are not used in page.
GZIP Compression : Apply GZIP compression on pages and static js and css files.
Caching : At the server level (IIS) you caching can be applied on these static files like JS or CSS
http://sixrevisions.com/web-development/decrease-webpage-load-times/
Combine multiple JavaScript files into one JS file
Good Luck !!
Bundling Files Together
Most of the current major browsers limit the number of simultaneous connections per each hostname to six. That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser
Bundling can significantly improve your first page hit download time.
Bundling reduces the number of individual HTTP requests to server by combining multiple CSS files and Javascript files into single CSS file and javascript file.
This site here has a good tutorial on how to add bundling to your application in five easy steps: http://websitespeedoptimizations.com/Bundling.aspx
I am trying to write an MVC.NET web-site and I want to use the datepicker component from jQuery. To use jQuery I am using the following code on my Layout page:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/jquery.ui.all.css")" type="text/css" />
<link href="#Url.Content("~/Content/jquery.ui.datepicker.css")" type="text/css" />
</head>
On the page where I want to use datepicker I use the following code:
<script type="text/javascript">
$(document).ready(function () {
$("#FromDate").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
...
<div class="editor-field-search">
<label for="fromDate">From date:</label>
<input type="text" id="FromDate" name="FromDate" value=""/>
</div>
But datepicker is displayed in a weird way:
I've Googled and tried to fixed, but have not find a way to fix my problem. What am I doing wrong?
It's a pure CSS reference problem. You don't have the CSS referenced correctly. Run my sample Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC and use the F12 tools and compare with your code to figure out why your CSS is not being used. – Rick.Anderson-at-Microsoft.com
comment out my CSS reference and you get the same malformed calendar. The F12 tools are great for figuring this out.
if you are copy paste your source code here I think you are missing a ">"
<label for="fromDate">From date:</label**>**
<input type="text" id="FromDate" name="FromDate" value=""/>
Does it work if you close the label tag?
<label for="fromDate">From date:</label>
^
I'm assuming you have downloaded a theme from jQuery's ThemeRoller...could try a couple things:
Use the jQuery and jQuery UI Javascript versions included in the download to
make sure it is compatible (in js directory of download). Looks
like jQuery 1.7.1 is the latest version included in jQuery UI
download and you have jQuery 1.7.2 on your page.
Try the jQuery UI css file in the css\custom-theme directory - it includes all the css needed for all the jQuery components. Also
check to make sure the images were copied next to the jQuery css
file in your application like it is in the custom-theme directory.
jQuery Getting Started Guide
I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. I have the following code which works correctly in ASP.Net (aspx) and I want to implement the same function in a WebPart and deploy into a page of SharePoint publishing portal site.
Any ideas how to implement? My major confusion is how to deal with the code in the head part of the following code? Any reference code or document?
Here is the aspx code I am using,
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<link type="text/css" href="tabcontrol/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="tabs-1">
<p>tab1 info</p>
</div>
<div id="tabs-2">
<p>tab2 info</p>
</div>
</div>
</div>
</body>
</html>
thanks in advance,
George
Check this links...
http://dotnet.org.za/zlatan/archive/2007/10/12/developing-ajax-web-parts-in-sharepoint-2007.aspx
http://www.bewise.fr/article/ptc/57/WSS-V3-Use-ASP-NET-AJAX-Framework-with-WSS-30.aspx
If you need help tell me that I can provide you a WebPart sample.
To include css or js files you can do something like this...
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
ClientScriptManager cs = Page.ClientScript;
string includeTemplate = "<link rel='stylesheet' text='text/css' href='{0}' />";
string includeLocation = Page.ClientScript.GetWebResourceUrl(this.GetType(), "App_Themes.MyButtons.css");
LiteralControl include = new LiteralControl(String.Format(includeTemplate, includeLocation));
Page.Header.Controls.Add(include);
includeTemplate = "<link rel='stylesheet' text='text/css' href='{0}' />";
includeLocation = Page.ClientScript.GetWebResourceUrl(this.GetType(), "App_Themes.MyMainModalDialog.css");
include = new LiteralControl(String.Format(includeTemplate, includeLocation));
Page.Header.Controls.Add(include);
}
In this sample I include MyMainModalDialog.css and MyButtons.css dynamically
For the CSS, you can use CssLink and CssRegistration:
// Custom CSS (fix the URL as necessary)
Microsoft.SharePoint.WebControls.CssLink cssLink =
new Microsoft.SharePoint.WebControls.CssLink();
cssLink.DefaultUrl = "/tabcontrol/themes/base/ui.all.css";
this.Page.Header.Controls.Add(cssLink);
I forget if there are other ways to handle custom javascript besides ClientScriptManager or Page.Header.Controls.Add(). There is a CustomJSUrl class but it doesn't seem to operate in the same way that the CssLink works.
Also, I believe your formatting script $(function() { $("#tabs").tabs() }) should be hooked to the page.load event rather than in the <head> block.