I'm trying to make the dashboard in Blazor WebAssmebly with Syncfusion charts. However, when I'm trying to display them I'm getting the following error:
Error: <text> attribute x: Expected length, "NaN".
I was thinking that maybe there is problem in the browser, but I tried to use Chrome and Edge browser and in both I'm getting the same error.
Statistics.razor:
<CascadingAuthenticationState>
<AuthorizeView >
<NotAuthorized>
<body>
<header class="bgimg-1" id="home">
<div class="w3-display-left w3-text-white" style="padding-left: 5%">
<div class="container" style="background: none">
<span class="w3-jumbo w3-hide-small">Log in to see the content</span><br>
<span class="w3-xxlarge w3-hide-large w3-hide-medium">Log in to see the content</span><br>
</div>
</div>
</header>
</body>
</NotAuthorized>
<Authorized>
#if (_statisticsToDisplay.Count == 0)
{
<div class="spinner"></div>
}
else
{
<div class="container2">
<div class="row">
<div class="col-sm" style="margin-left: 10%; margin-top: 5%; align-content: center;">
<div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
<table class='table' style=" color: black">
<thead>
<tr>
<th class="url" style="width: 35%">Worker</th>
<th class="isActive" style="width: 15%">Is Active</th>
<th class="status" style="width: 15%">Status</th>
<th class="duration" style="width: 15%">Duration (minutes)</th>
</tr>
</thead>
<tbody>
#foreach (var workerStatistic in _statisticsToDisplay)
{
<tr>
<td>#workerStatistic.URL</td>
<td>#workerStatistic.isActive</td>
<td>#workerStatistic.status</td>
<td>#workerStatistic.duration</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="col-sm" style="margin-right: 10%; margin-top: 5%; align-content: center;">
<div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
<SfChart Title="Analysis Of Failed Runs" Width="100%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Workers"
LabelPlacement="LabelPlacement.OnTicks" EdgeLabelPlacement="EdgeLabelPlacement.Shift"
LabelIntersectAction="LabelIntersectAction.Rotate90"
EnableTrim="true" MaximumLabelWidth="50" LabelPosition="AxisPosition.Outside">
<ChartAxisLabelStyle Color="red" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
<ChartMultiLevelLabels>
<ChartMultiLevelLabel>
<ChartAxisMultiLevelLabelTextStyle FontWeight="bold"></ChartAxisMultiLevelLabelTextStyle>
<ChartAxisMultiLevelLabelBorder Type="BorderType.Brace" Color="blue" Width=2>
</ChartAxisMultiLevelLabelBorder>
<ChartCategories>
<ChartCategory Start="-0.5" End="21.5" Text="Worker Name"></ChartCategory>
</ChartCategories>
</ChartMultiLevelLabel>
</ChartMultiLevelLabels>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Number Of Failed Runs" Minimum="0" Maximum="100" Interval="10">
<ChartAxisLabelStyle Color="blue" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
</ChartPrimaryYAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="#_statisticsToDisplay" XName="URL" YName="numberOfFailedRuns" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
<div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
<SfChart Title="Analysis Of The Duration Time Of The Workers" Width="100%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Workers"
LabelPlacement="LabelPlacement.OnTicks" EdgeLabelPlacement="EdgeLabelPlacement.Shift"
LabelIntersectAction="LabelIntersectAction.Rotate90"
EnableTrim="true" MaximumLabelWidth="50" LabelPosition="AxisPosition.Outside">
<ChartAxisLabelStyle Color="red" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
<ChartMultiLevelLabels>
<ChartMultiLevelLabel>
<ChartAxisMultiLevelLabelTextStyle FontWeight="bold"></ChartAxisMultiLevelLabelTextStyle>
<ChartAxisMultiLevelLabelBorder Type="BorderType.Brace" Color="blue" Width=2>
</ChartAxisMultiLevelLabelBorder>
<ChartCategories>
<ChartCategory Start="-0.5" End="21.5" Text="Worker Name"></ChartCategory>
</ChartCategories>
</ChartMultiLevelLabel>
</ChartMultiLevelLabels>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Average Duration (in minutes)" Minimum="0" Maximum="200" Interval="20">
<ChartAxisLabelStyle Color="blue" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
</ChartPrimaryYAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="#_statisticsToDisplay" XName="URL" YName="duration" Type="ChartSeriesType.Line">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
</div>
</div>
</div>
}
</Authorized>
</AuthorizeView>
</CascadingAuthenticationState>
#code{
public class ModelTest
{
public int ID { get; set; }
public string URL { get; set; }
public double duration { get; set; }
public bool isActive { get; set; }
public int numberOfFailedRuns { get; set; }
public string status { get; set; }
}
private List<Models.WorkerConfiguration> WorkerConfigList = new();
private List<Models.WorkerStatistic> WorkerStatisticsList = new();
private List<ModelTest> _statisticsToDisplay = new();
protected override async Task OnInitializedAsync()
{
WorkerStatisticsList = await WorkerStatistics.ReadAllWorkerStatistics();
WorkerConfigList = await WorkerConfigService.ReadAllWorkerConfigurations();
_statisticsToDisplay = ReadWorkerStatistics();
}
List<ModelTest> ReadWorkerStatistics()
{
List<ModelTest> statistics = new List<ModelTest>();
foreach (var workerStatistic in WorkerStatisticsList)
{
Models.WorkerConfiguration workerConfiguration = WorkerConfigService.GetWorkerConfigurationById(workerStatistic.FkWorkerConfigurationId);
int countNumberOfFailedRuns = 0;
DateTime? start = workerStatistic.StartTime;
DateTime? end = workerStatistic.EndTime;
TimeSpan? calculateDuration = end -start;
if (workerStatistic.Status == "Failed")
{
countNumberOfFailedRuns++;
}
statistics.Add(new ModelTest(){URL = workerConfiguration.Url, duration = calculateDuration.Value.TotalMinutes , isActive = workerConfiguration.IsActive, numberOfFailedRuns = countNumberOfFailedRuns, status = workerStatistic.Status});
}
return statistics;
}
}
My current page looks like that: https://i.stack.imgur.com/TPH56.jpg
Can you give me any suggestions what am I doing wrong?
We have created a simple Blazor application in which we are unable to replicate the reported scenario. We suggest you to check whether the XName and YName property in the ChartSeries are set as the dataSource properties. You can refer the below code snippet.
Code snippet:
#if (_statisticsToDisplay.Count == 0)
{
<div class="spinner"></div>
}
else
{
<div class="container2">
<div class="row">
<div class="col-sm" style="margin-left: 10%; margin-top: 5%; align-content: center;">
<div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
<table class='table' style=" color: black">
<thead>
<tr>
<th class="url" style="width: 35%">Worker</th>
<th class="isActive" style="width: 15%">Is Active</th>
<th class="status" style="width: 15%">Status</th>
<th class="duration" style="width: 15%">Duration (minutes)</th>
</tr>
</thead>
<tbody>
#foreach (var workerStatistic in _statisticsToDisplay)
{
<tr>
#*<td>#workerStatistic.URL</td>
<td>#workerStatistic.isActive</td>
<td>#workerStatistic.status</td>
<td>#workerStatistic.duration</td>*#
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="col-sm" style="margin-right: 10%; margin-top: 5%; align-content: center;">
<div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
<SfChart Title="Analysis Of Failed Runs" Width="100%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Workers"
LabelPlacement="LabelPlacement.OnTicks" EdgeLabelPlacement="EdgeLabelPlacement.Shift"
LabelIntersectAction="LabelIntersectAction.Rotate90"
EnableTrim="true" MaximumLabelWidth="50" LabelPosition="AxisPosition.Outside">
<ChartAxisLabelStyle Color="red" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
<ChartMultiLevelLabels>
<ChartMultiLevelLabel>
<ChartAxisMultiLevelLabelTextStyle FontWeight="bold"></ChartAxisMultiLevelLabelTextStyle>
<ChartAxisMultiLevelLabelBorder Type="BorderType.Brace" Color="blue" Width=2>
</ChartAxisMultiLevelLabelBorder>
<ChartCategories>
<ChartCategory Start="-0.5" End="21.5" Text="Worker Name"></ChartCategory>
</ChartCategories>
</ChartMultiLevelLabel>
</ChartMultiLevelLabels>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Number Of Failed Runs" Minimum="0" Maximum="100" Interval="10">
<ChartAxisLabelStyle Color="blue" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
</ChartPrimaryYAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="#_statisticsToDisplay" XName="Period" YName="Can_Growth" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
<div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
<SfChart Title="Analysis Of The Duration Time Of The Workers" Width="100%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Workers"
LabelPlacement="LabelPlacement.OnTicks" EdgeLabelPlacement="EdgeLabelPlacement.Shift"
LabelIntersectAction="LabelIntersectAction.Rotate90"
EnableTrim="true" MaximumLabelWidth="50" LabelPosition="AxisPosition.Outside">
<ChartAxisLabelStyle Color="red" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
<ChartMultiLevelLabels>
<ChartMultiLevelLabel>
<ChartAxisMultiLevelLabelTextStyle FontWeight="bold"></ChartAxisMultiLevelLabelTextStyle>
<ChartAxisMultiLevelLabelBorder Type="BorderType.Brace" Color="blue" Width=2>
</ChartAxisMultiLevelLabelBorder>
<ChartCategories>
<ChartCategory Start="-0.5" End="21.5" Text="Worker Name"></ChartCategory>
</ChartCategories>
</ChartMultiLevelLabel>
</ChartMultiLevelLabels>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Average Duration (in minutes)" Minimum="0" Maximum="200" Interval="20">
<ChartAxisLabelStyle Color="blue" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
</ChartPrimaryYAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="#_statisticsToDisplay" XName="Period" YName="Viet_Growth" Type="ChartSeriesType.Line">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
</div>
</div>
</div>
}
#code {
private SfChart chartInstance;
public class LineChartData
{
public double Period { get; set; }
public double Can_Growth { get; set; }
public double Viet_Growth { get; set; }
}
public List<LineChartData> _statisticsToDisplay = new List<LineChartData>
{
new LineChartData { Period = 2020, Can_Growth = 11.0, Viet_Growth = 19.5 },
new LineChartData { Period = 2019, Can_Growth = 12.9, Viet_Growth = 17.5 },
new LineChartData { Period = 2018, Can_Growth = 13.4, Viet_Growth = 15.5 },
new LineChartData { Period = 2017, Can_Growth = 13.7, Viet_Growth = 10.3 },
new LineChartData { Period = 2016, Can_Growth = 12.7, Viet_Growth = 7.8 },
new LineChartData { Period = 2015, Can_Growth = 12.5, Viet_Growth = 5.7 },
new LineChartData { Period = 2014, Can_Growth = 12.7, Viet_Growth = 5.9 },
new LineChartData { Period = 2013, Can_Growth = 12.4, Viet_Growth = 5.6 },
new LineChartData { Period = 2012, Can_Growth = 13.5, Viet_Growth = 5.3 }
};
}
Related
I have created in data-table using bootstrap.
I have used data-table in ionic 3 website.
But problem was I use edit button in data-table
then first time it is working good .
After searching record it can not working click and not call method.
I'm get stuck please help me to solve this issue.
branch.html
<ion-content class="bgimg">
<ion-grid style="color: aliceblue">
<ion-row>
<ion-col col-8></ion-col>
<!--<ion-col col->-->
<!--</ion-col>-->
<ion-col col-2> <button float-end ion-button outline color="editcolor" style="color: white" (click)="addbranch()">Add</button></ion-col>
<ion-col col-1></ion-col>
</ion-row>
<ion-row>
<ion-col col-2></ion-col>
<ion-col col-8>
<div *ngIf="checkdatatable">
<table id="example12">
<thead>
<tr>
<th text-capitalize style="border: 1px solid rgba(255,255,255,1);" width="20%">Image</th>
<th style="border: 1px solid rgba(255,255,255,1);">name</th>
<th style="border: 1px solid rgba(255,255,255,1);">address</th>
<th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
<th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
<th style="border: 1px solid rgba(255,255,255,1);" text-capitalize>Action</th>
</tr>
</thead>
<tfoot>
<tr >
<th text-capitalize style="border: 1px solid rgba(255,255,255,1);">Image</th>
<th style="border: 1px solid rgba(255,255,255,1);">name</th>
<th style="border: 1px solid rgba(255,255,255,1);" width="15%">address</th>
<th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
<th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
<th style="border: 1px solid rgba(255,255,255,1);" text-capitalize width="20%">Action</th>
</tr>
</tfoot>
<tbody>
<tr style=" background:rgba(0,0,0,0.0); color: white;font-size: 16px" *ngFor="let item of branchlist" >
<td style="border: 1px solid rgba(255,255,255,0.5);">
<img src="{{item.image}}" height="100px">
</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.name}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.address}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.phone}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.pincode}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">
<!--<input type="hidden" id="idmain" value="{{item._id}}">-->
<button color="editcolor" ion-button (click)="updatebranch(item._id)">Edit</button>
<button color="deletecolor" ion-button (click)="deletebranch(item._id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</ion-content>
branch.ts
import { Component } from '#angular/core';
import {
AlertController, IonicPage, LoadingController, NavController, NavParams, ToastController, ModalController,
App
} from 'ionic-angular';
import {WebserviceallProvider} from "../../providers/webserviceall/webserviceall";
import { Storage } from '#ionic/storage';
import {LoginPage} from "../login/login";
/**
* Generated class for the BranchesPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-branches',
templateUrl: 'branches.html',
})
export class BranchesPage {
resposnsdata:any;
branchlist:any;
checkdatatable:boolean=false;
branchname = {name:''};
branchupdatedata = {name:''};
constructor(private storage: Storage,private app:App,public modalCtrl: ModalController,private alertCtrl: AlertController,private calldata:WebserviceallProvider,public navCtrl: NavController, public navParams: NavParams,public loadingCtrl: LoadingController,private toastCtrl: ToastController)
{
storage.get('token').then((val) => {
console.log('Your Token is', val);
if(val === null || val === "non")
{
this.app.getRootNav().setRoot(LoginPage);
}
});
this.getshow();
}
ionViewEnter(){
this.getshow();
}
myFunction(name) {
document.getElementById("demo").innerHTML =
"Welcome " + name;
}
getshow(){
//this.presentLoading();
this.calldata.branchlist().then((result) => {
this.branchlist = [];
this.resposnsdata = result;
console.log(this.resposnsdata);
this.branchlist = this.resposnsdata.data;
$(document).ready(function () {
// alert("call aklsdaklsd");
$('#example12').DataTable();
});
this.checkdatatable=true;
//check user name
//console.log("print login Response >>"+this.resposnsdata);
if (this.resposnsdata.status === 200) {
}
else
{
this.presentToast(this.resposnsdata.message);
}
}, (err) => {
console.log("Error Block Call");
this.presentToast("Server Problem");
});
}
presentLoading() {
let loader = this.loadingCtrl.create({
content: "Please wait...",
duration: 2000
});
loader.present();
}
presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 2000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
ionViewDidLoad() {
console.log('ionViewDidLoad BranchesPage');
}
deletebranch(bid){
console.log(bid);
//this.presentLoading();
this.calldata.branchdelete(bid).then((result) => {
this.resposnsdata = result;
console.log(this.resposnsdata);
this.getshow();
//check user name
//console.log("print login Response >>"+this.resposnsdata);
if (this.resposnsdata.status === 200) {
}
else
{
this.presentToast(this.resposnsdata.message);
}
}, (err) => {
console.log("Error Block Call");
this.presentToast("Server Problem");
});
}
addbranch() {
var modalPage = this.modalCtrl.create('MAddbranchPage');
modalPage.present();
modalPage.onDidDismiss(data=>{
this.getshow();
});
}
updatebranch(id){
console.log("edit call");
var dataid = {
bid:id
};
var modalPage = this.modalCtrl.create('MEditbranchPage',{data:dataid});
modalPage.present();
modalPage.onDidDismiss(data=>{
this.getshow();
});
}
}
ion-button only support in cordova, in other words, you must enable cordova for browser or just simple remove ion-button
<button color="editcolor" (click)="updatebranch(item._id)">Edit</button>
<button color="deletecolor" (click)="deletebranch(item._id)">Delete</button>
i am working in HTML to PDF conversion using ItextPdf 5.5.1 and XMLWorker 5.5.1 in Java.
i managed to convert PDF document having height as that of HTML contents but contents in PDF looking bigger and having unwanted spaces between lines. These spaces are not there in HTML document.
private static void createPdf() {
try {
// getting HTML file from the path
InputStream is = new FileInputStream(new File("/Users/salman.nazir/Desktop/html/tq.txt"));
Date now = new Date();
File file = new File(("/Users/salman.nazir/Desktop"), "my_" + now.getTime() + ".pdf");
ElementList el = parseToElementList(is, new XMLWorkerFontProvider("resources/fonts/"));
// width of 204pt
float width = 204;
// height as 10000pt (which is much more than we'll ever need)
float max = 10000;
//column without a `writer`
ColumnText ct = new ColumnText(null);
ct.setSimpleColumn(new Rectangle(width, max));
for (Element e : el) {
// Add only HTML Body Element
// Avoiding IllegalArgumentException ("Format not found.")
if(!e.isContent()) {
System.out.print("META DATA");
}
else {
ct.addElement(e);
}
}
ct.go(true);
// Getting y posItion from simulation mode
float y = ct.getYLine();
Rectangle pagesize = new Rectangle(width, (max - y) + 25);
// Document with predefined page size
Document document = new Document(pagesize, 0, 0, 0, 0);
// Getting PDF Writer
PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(file));
document.open();
// Column with a writer
ct = new ColumnText(writer.getDirectContent());
ct.setSimpleColumn(pagesize);
for (Element e : el) {
// Add only HTML Body Element
// Avoiding IllegalArgumentException ("Format not found.")
if(!e.isContent()) {
System.out.print("META DATA");
}
else {
ct.addElement(e);
}
}
ct.go();
// closing the document
document.close();
showPDFPath(file.getAbsolutePath());
} catch (Exception e) {
e.printStackTrace();
}
}
is there any thing to set resolution anywhere in the code ? here is HTML code that is working fine in browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Lieferschein/Rechnung 27.03.17 11:18 2017/2432</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
#font-face {
font-family: "Roboto Mono";
src: url('RobotoMono-Bold.ttf') format('ttf'), url('RobotoMono-BoldItalic.ttf') format('ttf'), url('RobotoMono-Italic.ttf') format('ttf'), url('RobotoMono-Light.ttf') format('ttf'), url('RobotoMono-LightItalic.ttf') format('ttf'), url('RobotoMono-Medium.ttf') format('ttf'), url('RobotoMono-MediumItalic.ttf') format('ttf'), url('RobotoMono-Regular.ttf') format('ttf'), url('RobotoMono-Thin.ttf') format('ttf'), url('RobotoMono-ThinItalic.ttf') format('ttf');
}
body {
font-family: "Roboto Mono";
font-size: 2pt;
width: 100%;
margin: 0pt;
}
.documentType {
text-transform: uppercase;
}
h1 {
text-align: center;
font-size: 16pt;
font-weight: normal;
}
h2 {
text-align: center;
font-size: 10pt;
font-weight: normal;
margin: 0pt;
}
tr.manual_imprint td {
border-bottom:1pt dotted black;
height: 30pt;
vertical-align: bottom;
}
h3 {
text-align: center;
font-size: 13pt;
font-weight: normal;
}
h3.left {
font-size: 13pt;
text-align: left;
}
hr {
height: 1pt;
color: black;
background-color: black;
border: 0pt;
}
table {
width: 100%;
border: 0pt;
padding: 0pt;
border-spacing: 0pt;
}
tr.lineitem_head td {
border-bottom:1pt solid black;
}
tr.total td {
border-top:1pt solid black;
border-bottom:3pt double black;
font-size: 6pt;
font-weight: bold;
}
td {
overflow: hidden;
}
td.left {
max-width: 1px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td.left_indent {
text-align: left;
padding-left: 7pt;
}
td.right {
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.image-container {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>Tischlerei Helmut Meyer_676647</h1>
<h2>Winsener Landstrasse 22</h2>
<br></br>
<div class="image-container"><img src="http://www.iconsdb.com/icons/download/gray/android-6-512.jpg"/> </div> <h2>21423 Winsen / Luhe</h2>
<h2></h2>
<h2>Tel.: +4940441777</h2>
<h3 class="left documentType">Lieferschein/Rechnung</h3>
<table class="order">
<tr class="lineitem_head">
<td>Nr. 2017/2432</td>
<td class="right">27.03.17 11:18</td>
</tr>
</table>
<table class="lineitems">
<colgroup>
<col width="100%" />
<col width="0%" />
</colgroup>
<tbody>
<tr class="lineitem" data-net="3,78 €">
<td class="left">1x Filter Kalita</td>
<td class="right">4,50 €</td>
</tr>
<tr class="lineitem" data-net="3,03 €">
<td class="left">1x Latte</td>
<td class="right">3,60 €</td>
</tr>
<tr class="lineitem" data-net="7,38 €">
<td class="left">1x Skywalker/250g</td>
<td class="right">7,90 €</td>
</tr>
<tr class="lineitem" data-net="8,32 €">
<td class="left">1x Playground Love</td>
<td class="right">8,90 €</td>
</tr>
<tr class="lineitem" data-net="12,06 €">
<td class="left">1x Dschaggah Khan</td>
<td class="right">12,90 €</td>
</tr>
<tr class="lineitem" data-net="12,06 €">
<td class="left">1x King Kongo</td>
<td class="right">12,90 €</td>
</tr>
</tbody>
<tfoot>
<tr class="total">
<td class="left">Total</td>
<td class="right">50,70 €</td>
</tr>
<tr class="net">
<td class="left">Netto</td>
<td class="right">46,62 €</td>
</tr>
<tr class="tax">
<td class="left">7,00 VAT</td>
<td class="right">2,79 €</td>
</tr>
<tr class="tax">
<td class="left">19,00 VAT</td>
<td class="right">1,29 €</td>
</tr>
</tfoot>
</table>
<h3>Vielen Dank für Ihren Besuch!</h3>
<h2>St-Nr.: </h2>
</body>
</html>
Your issue is due to print resolution used in the parser which, by default is 72. You should design for that resolution instead of 100 or any other resolution (ie: If you'll be printing PDFs of letter size (8.5in x 11in), instead of designing for 850px by 1100px, you should do it on 612px x 792px.
I run into a problem while tring to add new row to Table.
The problem is the new row is added into blcok rather than block.
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
table{
border: 1px solid #ccc;
}
<table id="myTable">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
</tr>
</thead>
<tbody>
//new row is supposed to add into here.
<tbody>
</table>
<br>
<button onclick="myFunction()">Try it</button>
Thanks for any help.
You wanted to add new row to tbody, so select tbody first using getElementsByTagName("tbody") on . Also use insertRow(0) instead of insertRow(1)
function myFunction() {
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName('tbody');
console.log(tbody)
var row = tbody[0].insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
table{
border: 1px solid #ccc;
}
<table id="myTable">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
</tr>
</thead>
<tbody>
//new row is supposed to add into here.
<tbody>
</table>
<br>
<button onclick="myFunction()">Try it</button>
I'm having trouble using PdfAWriter class to convert my HTML to PDF, the HTML gets converted normally until it finds a table or a list.
If I use PdfWriter class it works fine, but I need a PDF/A version.
Here is the code I'm using to make the conversion:
public static byte[] ConverterParaPdf(string html)
{
MemoryStream ms = new MemoryStream();
Document document = new iTextSharp.text.Document(PageSize.A4);
PdfAWriter writer = PdfAWriter.GetInstance(document, ms, PdfAConformanceLevel.PDF_A_1B);
//PdfWriter writer = PdfWriter.GetInstance(document, ms);
writer.PdfVersion = PdfWriter.VERSION_1_7;
writer.SetTagged();
writer.ViewerPreferences = PdfWriter.DisplayDocTitle;
writer.CloseStream = false;
writer.InitialLeading = 12.5f;
writer.CompressionLevel = PdfStream.BEST_COMPRESSION;
//writer.SetFullCompression(); //Causa erro no padrão PDF_A_1*
try
{
document.AddLanguage("pt-BR");
document.AddCreationDate();
writer.CreateXmpMetadata();
document.Open();
ICC_Profile icc = ICC_Profile.GetInstance((byte[])Properties.Mensagens.ResourceManager.GetObject("icc_profile"));
writer.SetOutputIntents("Custom", "", "http://www.color.org", "sRGB IEC61966-2.1", icc);
MemoryStream cssStream = new MemoryStream(Encoding.UTF8.GetBytes("html, html * { font-family: Arial, Arial, Arial!important; color: black!important; }"));
MemoryStream htmlStream = new MemoryStream(Encoding.UTF8.GetBytes(html));
XMLWorkerHelper.GetInstance().ParseXHtml(writer, document, htmlStream, cssStream);
document.Close();
writer.Close();
}
catch (Exception ex)
{
throw ex;
}
byte[] byteArray = ms.ToArray();
ms.Close();
return byteArray;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
font-family: Arial;
font-size: 15px;
background-color: white;
margin: 20px;
}
.imagem {
padding-bottom: 15px;
}
.titulo {
font-size: 23px;
font-weight: bold;
}
.barra-tipo-documento {
background-color: #3B454E;
width: 4px;
height: 40px;
float: left;
}
.tipo-documento {
padding-left: 16px;
padding-top: 13px;
float: left;
font-size: 17px;
color: #3B454E;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td class="imagem">
<img src="http://localhost:8090/Resources/img/logomarca-documentos.wmf" height="45" alt="TCE-ES"/>
</td>
</tr>
<tr>
<td>
<div class="barra-tipo-documento"> </div>
<div class="tipo-documento">Comunicação Interna</div>
</td>
</tr>
</table>
<br />
<br />
<div><strong>N.º: </strong>00747/2014-7</div>
<div><strong>Data: </strong>22/10/2014 18:05:10</div>
<div><strong>Assunto: </strong>teste</div>
<div><strong>De: </strong>NCD</div>
<div><strong>Para: </strong>NCD</div>
<div></div>
<div><strong>Anexos: </strong>12252/2014-9, 12253/2014-3</div>
<br />
<div><p> gerqg r</p>
<p>g </p>
<ol>
<li>eqrg geqr</li>
<li>g er</li>
<li>g</li>
<li>qe r</li>
<li>geqr</li>
</ol>
<p>g eqrgqergqerg</p>
<p> geqr geqrg</p>
</div>
</div>
</body>
</html>
Image:
http://postimg.org/image/9utepiza1/
I'm using itextsharp/itextsharp.pdfa/itextsharp.xmlworker/itextsharp.xtra version 5.5.3.0.
If there is another way of doing it, please tell me, I even tried using HtmlWorker which is obsolete.
Implemented this on our site about a month ago and it was working perfectly. Today, suddenly, I am getting this error on all pages that have the auto complete. I created a blank page with nothing but the example code copy pasted from Google's Docs, and I still get the error. Yet on Google's site, the example works.
The error is:
ReferenceError: V is not defined
...,function(a,b){V("places_impl",N(this,function(){this.Sa.getDetails(a,b)}))});G....
Here is the code, straight from Google:
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
// [END region_geolocation]
</script>
<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
</body>
</html>
On Google's example page, there is an error relating to a variable "Tk", but it the example still works. Whatever this V is, it is killing all my code. Any help?
Though you haven't mentioned which browser you are using and whether you use Firebug, here's what worked for me:
Initially, I thought Google updated their Maps JS which introduced this bug. However, after further digging around and testing in other browsers, I finally realised that this issue is caused by Firebug 2.0. Firebug got automatically updated to v2.0 on my computer, thus resulting in the error. Downgrading Firebug resolves the issue.