safet.purkovic
/
PDFEngineDemoUI
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

DemoUpdate

master
Igor_Budimski 4 vuotta sitten
vanhempi
85285720bd
commit
7d7122c6cd
13 muutettua tiedostoa jossa 540 lisäystä ja 518 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 13
    11
      src/views/demoComponent/DemoComponent1.js
  2. 19
    17
      src/views/demoComponent/DemoComponent10.js
  3. 10
    8
      src/views/demoComponent/DemoComponent11.js
  4. 315
    313
      src/views/demoComponent/DemoComponent12.js
  5. 23
    21
      src/views/demoComponent/DemoComponent13.js
  6. 12
    10
      src/views/demoComponent/DemoComponent2.js
  7. 10
    10
      src/views/demoComponent/DemoComponent3.js
  8. 11
    10
      src/views/demoComponent/DemoComponent4.js
  9. 23
    18
      src/views/demoComponent/DemoComponent5.js
  10. 14
    15
      src/views/demoComponent/DemoComponent6.js
  11. 57
    55
      src/views/demoComponent/DemoComponent7.js
  12. 16
    15
      src/views/demoComponent/DemoComponent8.js
  13. 17
    15
      src/views/demoComponent/DemoComponent9.js

+ 13
- 11
src/views/demoComponent/DemoComponent1.js Näytä tiedosto

window.print(); window.print();
} }
// const apiCall = () => { // const apiCall = () => {
// const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2"); // const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2");
// const dateNow = new Date(); // const dateNow = new Date();
// fetch('https://localhost:7285/api/PDFGenerator/' + url) // fetch('https://localhost:7285/api/PDFGenerator/' + url)
// } else { // } else {
// // For other browsers: create a link pointing to the ObjectURL containing the blob. // // For other browsers: create a link pointing to the ObjectURL containing the blob.
// const objUrl = window.URL.createObjectURL(newBlob); // const objUrl = window.URL.createObjectURL(newBlob);
// let link = document.createElement('a'); // let link = document.createElement('a');
// link.href = objUrl; // link.href = objUrl;
// link.download = resObj.filename; // link.download = resObj.filename;
// link.click(); // link.click();
// // For Firefox it is necessary to delay revoking the ObjectURL. // // For Firefox it is necessary to delay revoking the ObjectURL.
// setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250); // setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250);
// } // }
// } // }
return ( return (
<> <>
<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 code="br-hide">
<div 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' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Print view</button>
</div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Print view</button>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div> </div>
</div> </div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div> </div>
<br /> <br />
1 1

+ 19
- 17
src/views/demoComponent/DemoComponent10.js Näytä tiedosto

import React, { lazy, useEffect, useRef, useState } from 'react';
import React, { lazy, useRef, useState } from 'react';
import { import {
CBadge, CBadge,
CButton, CButton,
const [codeValue, setCodeValue] = useState("null"); const [codeValue, setCodeValue] = useState("null");
const values = { portrait: "null", landscape: "br-landscapetable" } const values = { portrait: "null", landscape: "br-landscapetable" }


const handleChange = (e) => {
setCodeValue(e.target.value);
}
// const handleChange = (e) => {
// setCodeValue(e.target.value);
// }


const codeRef = useRef(); const codeRef = useRef();


setCodeValue(codeRef.current.value); setCodeValue(codeRef.current.value);
const query = []; const query = [];


query.push(`Landscape=${(codeRef.current.value == 'null')?false:true}`);
query.push(`Landscape=${(codeRef.current.value === 'null') ? false : true}`);
// query.push("PaperFormatType=A3"); // query.push("PaperFormatType=A3");
const queryString = (query) ? `?${query.join('&')}` : ''; 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%2FDemoComponent10' + queryString);
} }
return ( return (
<> <>
<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: '100%', 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' }}>
<select id="sel" ref={codeRef} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
<option value={values.portrait}>Portrait</option>
<option value={values.landscape}>Landscape</option>
</select>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary dugme" onClick={exec}>Execute</button>
<div code="br-hide">
<div 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: '100%', 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' }}>

<select id="sel" ref={codeRef} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
<option value={values.portrait}>Portrait</option>
<option value={values.landscape}>Landscape</option>
</select>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary dugme" onClick={exec}>Execute</button>
</div>
</div> </div>
</div> </div>
</div> </div>

+ 10
- 8
src/views/demoComponent/DemoComponent11.js Näytä tiedosto

} }
return ( return (
<> <>
<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: '100%', 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 column number" type="text" name="name" onChange={handleChange} />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove</button>
<div code="br-hide">
<div 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: '100%', 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 column number" type="text" name="name" onChange={handleChange} />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove</button>
</div>
</div> </div>
</div> </div>
</div> </div>

+ 315
- 313
src/views/demoComponent/DemoComponent12.js Näytä tiedosto

import React, { lazy, useEffect, useRef, useState } from 'react';
import React, { lazy, useRef, useState } from 'react';
import { import {
CBadge, CBadge,
CButton, CButton,
const [codeValue, setCodeValue] = useState("null"); const [codeValue, setCodeValue] = useState("null");
const values = { portrait: "null", landscape: "br-landscapetable" } const values = { portrait: "null", landscape: "br-landscapetable" }


const handleChange = (e) => {
setCodeValue(e.target.value);
}
// const handleChange = (e) => {
// setCodeValue(e.target.value);
// }


const codeRef = useRef(); const codeRef = useRef();


setCodeValue(codeRef.current.value); setCodeValue(codeRef.current.value);
const query = []; const query = [];


query.push(`Landscape=${(codeRef.current.value == 'null')?false:true}`);
query.push(`Landscape=${(codeRef.current.value === 'null') ? false : true}`);
// query.push("PaperFormatType=A3"); // query.push("PaperFormatType=A3");
const queryString = (query) ? `?${query.join('&')}` : ''; const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent12' + queryString); const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent12' + queryString);
} }
return ( return (
<> <>
<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: '100%', 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' }}>
<select id="sel" ref={codeRef} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
<option value={values.portrait}>Portrait</option>
<option value={values.landscape}>Landscape</option>
</select>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary dugme" onClick={exec}>Execute</button>
<div code="br-hide">
<div 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: '100%', 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' }}>

<select id="sel" ref={codeRef} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
<option value={values.portrait}>Portrait</option>
<option value={values.landscape}>Landscape</option>
</select>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary dugme" onClick={exec}>Execute</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<br /> <br />
<br /> <br />
<WidgetsDropdown /> <WidgetsDropdown />
<div className="demo"> <div className="demo">
<CCard code={codeValue} isolate="true">
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" className="card-title mb-0">Traffic</h4>
<div className="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-right">
<CIcon name="cil-cloud-download" />
</CButton>
<CButtonGroup className="float-right mr-3">
{
['Day', 'Month', 'Year'].map(value => (
<CButton
color="outline-secondary"
key={value}
className="mx-0"
active={value === 'Month'}
>
{value}
</CButton>
))
}
</CButtonGroup>
</CCol>
</CRow>
<MainChartExample style={{ height: '300px', marginTop: '40px' }} />
</CCardBody>
<CCardFooter>
<CRow className="text-center">
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="success"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="info"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="warning"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="danger"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
value={40}
/>
</CCol>
</CRow>
</CCardFooter>
</CCard>
<CCard code={codeValue} isolate="true">
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" className="card-title mb-0">Traffic</h4>
<div className="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-right">
<CIcon name="cil-cloud-download" />
</CButton>
<CButtonGroup className="float-right mr-3">
{
['Day', 'Month', 'Year'].map(value => (
<CButton
color="outline-secondary"
key={value}
className="mx-0"
active={value === 'Month'}
>
{value}
</CButton>
))
}
</CButtonGroup>
</CCol>
</CRow>
<MainChartExample style={{ height: '300px', marginTop: '40px' }} />
</CCardBody>
<CCardFooter>
<CRow className="text-center">
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="success"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="info"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="warning"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="danger"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
value={40}
/>
</CCol>
</CRow>
</CCardFooter>
</CCard>
</div> </div>
<CRow> <CRow>
<CCol> <CCol>
</CRow> </CRow>
<div> <div>
<br /> <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>
<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="admin@bootstrapmaster.com" />
<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
<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>
<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="admin@bootstrapmaster.com" />
<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>
</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 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="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">
</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="admin@bootstrapmaster.com" />
<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="admin@bootstrapmaster.com" />
<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>
<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>
<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="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-secondary"></span>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div> </div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</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="admin@bootstrapmaster.com" />
<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>
</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 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="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</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="admin@bootstrapmaster.com" />
<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>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div> </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="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="admin@bootstrapmaster.com" />
<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>
<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="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div> </div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</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="admin@bootstrapmaster.com" />
<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>
</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 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>
<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> </div>
</CCardBody> </CCardBody>
</CCard> </CCard>

+ 23
- 21
src/views/demoComponent/DemoComponent13.js Näytä tiedosto

} }
} }
const exec = () => { const exec = () => {
const query = [];
const query = [];
// query.push("MarginTop=100 mm"); // query.push("MarginTop=100 mm");
// query.push("PaperFormatType=A3"); // query.push("PaperFormatType=A3");
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent13'+queryString);
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent13' + queryString);
let headers = new Headers(); let headers = new Headers();
headers.append('Content-Type', 'application/pdf'); headers.append('Content-Type', 'application/pdf');
fetch(url, { fetch(url, {
method: 'GET', method: 'GET',
headers: headers headers: headers
} else { } else {
// For other browsers: create a link pointing to the ObjectURL containing the blob. // For other browsers: create a link pointing to the ObjectURL containing the blob.
const objUrl = window.URL.createObjectURL(newBlob); const objUrl = window.URL.createObjectURL(newBlob);
let link = document.createElement('a'); let link = document.createElement('a');
link.href = objUrl; link.href = objUrl;
link.download = resObj.filename; link.download = resObj.filename;
link.click(); link.click();
// For Firefox it is necessary to delay revoking the ObjectURL. // For Firefox it is necessary to delay revoking the ObjectURL.
setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250); setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250);
} }
} }
return ( return (
<> <>
<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 code="br-hide">
<div 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>
<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 style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div> </div>
</div> </div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div> </div>
<br/>
<br/>
<WidgetsDropdown />
<br />
<br />
<WidgetsDropdown />
<CCard isolate="true"> <CCard isolate="true">
<CCardBody> <CCardBody>
<CRow> <CRow>
</CCol> </CCol>
</CRow> </CRow>
<div> <div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table"> <table className="table table-hover table-outline mb-0 d-sm-table">
<thead className="thead-light"> <thead className="thead-light">
<tr> <tr>

+ 12
- 10
src/views/demoComponent/DemoComponent2.js Näytä tiedosto

CCallout CCallout
} from '@coreui/react'; } from '@coreui/react';
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
//import PDFEngine from 'PDFEngine';
import PDFEngine from 'PDFEngine';


import MainChartExample from '../charts/MainChartExample.js'; import MainChartExample from '../charts/MainChartExample.js';
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js')) const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent2 = () => { const DemoComponent2 = () => {
const exec = () => { const exec = () => {
console.log(PDFEngine());
const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2"); const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2");
const dateNow = new Date(); const dateNow = new Date();
fetch('https://localhost:7285/api/PDFGenerator/' + url) fetch('https://localhost:7285/api/PDFGenerator/' + url)
} }
return ( return (
<> <>
<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 code="br-hide">
<div 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' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Initiate export</button>
</div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Initiate export</button>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div> </div>
</div> </div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div> </div>
<br /> <br />
2 2

+ 10
- 10
src/views/demoComponent/DemoComponent3.js Näytä tiedosto





const DemoComponent3 = () => { const DemoComponent3 = () => {
const exec = () =>
{
const exec = () => {
PDFEngine(); PDFEngine();
window.print(); window.print();
} }
return ( return (
<> <>
<div code="br-hide" >
<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' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Hide table buttons</button>
<div code="br-hide">
<div >
<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' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Hide table buttons</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<br /> <br />
3 3

+ 11
- 10
src/views/demoComponent/DemoComponent4.js Näytä tiedosto





const DemoComponent4 = () => { const DemoComponent4 = () => {
const exec = () =>
{
const exec = () => {
PDFEngine(); PDFEngine();
window.print(); window.print();
} }
return ( return (
<> <>
<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 code="br-hide">
<div 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' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove table style</button>
</div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove table style</button>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div> </div>
</div> </div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div> </div>
<br /> <br />
4 4

+ 23
- 18
src/views/demoComponent/DemoComponent5.js Näytä tiedosto

import React, { lazy, useRef, useState } from 'react';
import React, { lazy, useState } from 'react';
import { import {
CBadge, CBadge,
CButton, CButton,
const DemoComponent5 = () => { const DemoComponent5 = () => {


const [rowNum, setRowNum] = useState(0); const [rowNum, setRowNum] = useState(0);
const refInput = useRef();
const handleSubmit = (event) =>
{
setRowNum(event.target.value);
exec();
const [inputValue, setInputValue] = useState("");

const handleChange = (event) => {
if (!isNaN(event.target.value)) {
setRowNum(event.target.value);
setInputValue(event.target.value);
} else {
alert('Not a number');
setInputValue("");
}
} }
const exec = () => { const exec = () => {
PDFEngine(); PDFEngine();
window.print(); window.print();
} }
return ( return (
<> <>
<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: '100%', 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' }}>
<form onSubmit={handleSubmit}>
<input ref={refInput} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter row number" type="text" name="name" />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary">Remove</button>
</form>
<div code="br-hide">
<div 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 row number" type="text" name="name" onChange={handleChange} />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove</button>
</div>
</div> </div>
</div> </div>
</div> </div>

<br /> <br />
5 5
<br /> <br />
</> </>
); );
} }

export default DemoComponent5; export default DemoComponent5;

+ 14
- 15
src/views/demoComponent/DemoComponent6.js Näytä tiedosto





const DemoComponent6 = () => { const DemoComponent6 = () => {
const exec = () =>
{
const exec = () => {
PDFEngine(); PDFEngine();
window.print(); window.print();
} }
return ( return (
<> <>
<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 code="br-hide">
<div 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' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<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>
</div> </div>
<br/>
<br/>
<WidgetsDropdown />
<br />
<br />
<WidgetsDropdown />
<CCard> <CCard>
<CCardBody> <CCardBody>
<CRow> <CRow>
</CCol> </CCol>
</CRow> </CRow>
<div> <div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" code="br-headereverypage"> <table className="table table-hover table-outline mb-0 d-sm-table" code="br-headereverypage">
<thead className="thead-light"> <thead className="thead-light">
<tr> <tr>

+ 57
- 55
src/views/demoComponent/DemoComponent7.js Näytä tiedosto





const DemoComponent7 = () => { const DemoComponent7 = () => {
const exec = () => { const exec = () => {
let query = [];
query.push("DisplayHeaderFooter=true");
query.push("HeaderTemplate=<img alt='title' src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' width='40'/>;");
query.push("MarginLeft=30 mm");
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent7'+queryString);
let headers = new Headers();
headers.append('Content-Type', 'application/pdf');
const dateNow = new Date();
fetch(url, {
method: 'GET',
headers: headers
})
.then(async res => ({
filename: "John Doe - " + dateNow +" - report.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);
}
let query = [];
query.push("DisplayHeaderFooter=true");
query.push("HeaderTemplate=<img alt='title' src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' width='40'/>;");
query.push("MarginLeft=30 mm");
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent7' + queryString);

let headers = new Headers();
headers.append('Content-Type', 'application/pdf');
const dateNow = new Date();
fetch(url, {
method: 'GET',
headers: headers
}) })
.catch((error) => {
console.log('DOWNLOAD ERROR', error);
});
.then(async res => ({
filename: "John Doe - " + dateNow + " - report.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 ( return (
<> <>
<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 code="br-hide">
<div 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' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div> </div>
</div> </div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div> </div>
<br/>
<br/>
<WidgetsDropdown />
<br />
<br />
<WidgetsDropdown />
<CCard> <CCard>
<CCardBody> <CCardBody>
<CRow> <CRow>
</CCol> </CCol>
</CRow> </CRow>
<div> <div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" > <table className="table table-hover table-outline mb-0 d-sm-table" >
<thead className="thead-light"> <thead className="thead-light">
<tr> <tr>

+ 16
- 15
src/views/demoComponent/DemoComponent8.js Näytä tiedosto





const DemoComponent8 = () => { const DemoComponent8 = () => {
const exec = () =>
{

const exec = () => {
PDFEngine(); PDFEngine();
window.print(); window.print();
} }
return ( return (
<> <>
<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 code="br-hide">
<div 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' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div> </div>
</div> </div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div> </div>
<br/>
<br/>
<WidgetsDropdown />
<br />
<br />
<WidgetsDropdown />
<CCard> <CCard>
<CCardBody> <CCardBody>
<CRow> <CRow>
</CCol> </CCol>
</CRow> </CRow>
<div> <div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" > <table className="table table-hover table-outline mb-0 d-sm-table" >
<thead className="thead-light"> <thead className="thead-light">
<tr> <tr>

+ 17
- 15
src/views/demoComponent/DemoComponent9.js Näytä tiedosto

const handleChange = (event) => { const handleChange = (event) => {
setPaperFormat(event.target.value); setPaperFormat(event.target.value);
} }
const handleChangeMargin = (event) => { const handleChangeMargin = (event) => {
setMargins(event.target.value); setMargins(event.target.value);
} }
} }
return ( return (
<> <>
<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: '100%', 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' }}>
<select value={paperFormat} onChange={handleChange} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
<option value="A4">A4</option>
<option value="A3">A3</option>
<option value="Letter">Letter</option>
</select>
<input value={margins} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', marginLeft: '5px', width: '210px' }} placeholder=" Margins: top, right, bottom, left" type="text" name="name" onChange={handleChangeMargin} />
<br />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
<div code="br-hide">
<div 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: '100%', 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' }}>
<select value={paperFormat} onChange={handleChange} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
<option value="A4">A4</option>
<option value="A3">A3</option>
<option value="Letter">Letter</option>
</select>
<input value={margins} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', marginLeft: '5px', width: '210px' }} placeholder=" Margins: top, right, bottom, left" type="text" name="name" onChange={handleChangeMargin} />
<br />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Peruuta
Tallenna