safet.purkovic
/
PDFEngineDemoUI
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

Bugfixed / image in header & print single widget table and graph

master
Safet Purkovic 4 år sedan
förälder
0c3a030f2b
incheckning
4e9944e1cb
3 ändrade filer med 90 tillägg och 246 borttagningar
Delad Vy Visa Diff Statistik
  1. 11
    1
      src/containers/_nav.js
  2. 75
    241
      src/views/demoComponent/DemoComponent12.js
  3. 4
    4
      src/views/demoComponent/DemoComponent13.js

+ 11
- 1
src/containers/_nav.js Visa fil

@@ -104,7 +104,7 @@ const _nav = [
},
{
_tag: 'CSidebarNavItem',
name: 'Export single widget',
name: 'Export single widget table',
to: '/DemoComponent10',
// icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
badge: {
@@ -112,6 +112,16 @@ const _nav = [
text: '',
}
},
{
_tag: 'CSidebarNavItem',
name: 'Export single widget graph',
to: '/DemoComponent12',
// icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
badge: {
color: 'info',
text: '',
}
},
{
_tag: 'CSidebarNavItem',
name: 'Dashboard',

+ 75
- 241
src/views/demoComponent/DemoComponent12.js Visa fil

@@ -1,4 +1,4 @@
import React, { lazy } from 'react';
import React, { lazy, useState } from 'react';
import {
CBadge,
CButton,
@@ -20,248 +20,82 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent12 = () => {
const exec = () =>
{
PDFEngine();
window.print();
const [paperFormat, setPaperFormat] = useState(0);
const [inputValue, setInputValue] = useState("");

const handleChange = (event) => {
if (!isNaN(event.target.value)) {
setPaperFormat(event.target.value);
setInputValue(event.target.value);
} else {
alert('Not a number');
setInputValue("");
}
}
const exec = () => {
const query = [];
// query.push("MarginTop=100 mm");
// query.push("PaperFormatType=A3");
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent12'+queryString);
let headers = new Headers();
headers.append('Content-Type', 'application/pdf');
fetch(url, {
method: 'GET',
headers: headers
})
.then(async res => ({
filename: "single widget.pdf",
blob: await res.blob()
}))
.then(resObj => {
// It is necessary to create a new blob object with mime-type explicitly set for all browsers except Chrome, but it works for Chrome too.
const newBlob = new Blob([resObj.blob], { type: 'application/pdf' });
const bytes = new Uint8Array(newBlob);
//console.log(bytes);
//modifyPdf(bytes);
// MS Edge and IE don't allow using a blob object directly as link href, instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(newBlob);
} else {
// For other browsers: create a link pointing to the ObjectURL containing the blob.
const objUrl = window.URL.createObjectURL(newBlob);
let link = document.createElement('a');
link.href = objUrl;
link.download = resObj.filename;
link.click();
// For Firefox it is necessary to delay revoking the ObjectURL.
setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250);
}
})
.catch((error) => {
console.log('DOWNLOAD ERROR', error);
});
}
return (
<>
<button className="float-right btn btn-primary" onClick={exec}>Execute</button>
<br />
12
<br />
<div>
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" code="br-removecolumn-0">
<thead className="thead-light">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/1.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-us" title="us" id="us" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-mastercard" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/2.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">

<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-br" title="br" id="br" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-visa" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/3.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-in" title="in" id="in" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-stripe" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/4.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-fr" title="fr" id="fr" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-paypal" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/5.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-es" title="es" id="es" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-google-pay" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/6.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-pl" title="pl" id="pl" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-amex" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</table>
<div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<input value={inputValue} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter paper format" type="text" name="name" onChange={handleChange} />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br />
<WidgetsDropdown />
<CCard>
<br/>
<br/>
<WidgetsDropdown />
<CCard isolate="true">
<CCardBody>
<CRow>
<CCol sm="5">
@@ -522,8 +356,8 @@ const DemoComponent12 = () => {
</CCol>
</CRow>
<div>
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" >
<br />
<table className="table table-hover table-outline mb-0 d-sm-table">
<thead className="thead-light">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>

+ 4
- 4
src/views/demoComponent/DemoComponent13.js Visa fil

@@ -38,7 +38,7 @@ const DemoComponent13 = () => {
// query.push("MarginTop=100 mm");
// query.push("PaperFormatType=A3");
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent10'+queryString);
const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent13'+queryString);
let headers = new Headers();
headers.append('Content-Type', 'application/pdf');
@@ -95,7 +95,7 @@ const DemoComponent13 = () => {
<br/>
<br/>
<WidgetsDropdown />
<CCard>
<CCard isolate="true">
<CCardBody>
<CRow>
<CCol sm="5">
@@ -103,7 +103,7 @@ const DemoComponent13 = () => {
<div className="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-right">
<CButton color="primary" className="float-right" onClick={isolate}>
<CIcon name="cil-cloud-download" />
</CButton>
<CButtonGroup className="float-right mr-3">
@@ -357,7 +357,7 @@ const DemoComponent13 = () => {
</CRow>
<div>
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" isolate="true">
<table className="table table-hover table-outline mb-0 d-sm-table">
<thead className="thead-light">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>

Write Förhandsgranska
Laddar…
Avbryt
Spara