safet.purkovic
/
PDFEngineDemoUI
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

DemoUpdate

master
Igor_Budimski 4 年之前
父節點
85285720bd
當前提交
7d7122c6cd
共有 13 個檔案被更改，包括 540 行新增 和 518 行删除
分割檢視 顯示文件統計
  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 查看文件

@@ -25,7 +25,7 @@ const DemoComponent1 = () => {
window.print();
}
// const apiCall = () => {
// const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2");
// const dateNow = new Date();
// fetch('https://localhost:7285/api/PDFGenerator/' + url)
@@ -45,12 +45,12 @@ const DemoComponent1 = () => {
// } 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);
// }
@@ -61,17 +61,19 @@ const DemoComponent1 = () => {
// }
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 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 style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br />
1

+ 19
- 17
src/views/demoComponent/DemoComponent10.js 查看文件

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

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

const codeRef = useRef();

@@ -33,7 +33,7 @@ const DemoComponent10 = () => {
setCodeValue(codeRef.current.value);
const query = [];

query.push(`Landscape=${(codeRef.current.value == 'null')?false:true}`);
query.push(`Landscape=${(codeRef.current.value === 'null') ? false : true}`);
// 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);
@@ -77,18 +77,20 @@ const DemoComponent10 = () => {
}
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>

+ 10
- 8
src/views/demoComponent/DemoComponent11.js 查看文件

@@ -40,14 +40,16 @@ const DemoComponent11 = () => {
}
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>

+ 315
- 313
src/views/demoComponent/DemoComponent12.js 查看文件

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

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

const codeRef = useRef();

@@ -33,7 +33,7 @@ const DemoComponent12 = () => {
setCodeValue(codeRef.current.value);
const query = [];

query.push(`Landscape=${(codeRef.current.value == 'null')?false:true}`);
query.push(`Landscape=${(codeRef.current.value === 'null') ? false : true}`);
// 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);
@@ -77,109 +77,111 @@ const DemoComponent12 = () => {
}
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>
<br />
<br />
<WidgetsDropdown />
<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>
<CRow>
<CCol>
@@ -359,231 +361,231 @@ const DemoComponent12 = () => {
</CRow>
<div>
<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="[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
<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="[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>
</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>
<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">
</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>
<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>
<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 className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</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="[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>
</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>
<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>
<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>
</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>
</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="[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>
<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 className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</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="[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>
</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>
<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>
</CCardBody>
</CCard>

+ 23
- 21
src/views/demoComponent/DemoComponent13.js 查看文件

@@ -33,16 +33,16 @@ const DemoComponent13 = () => {
}
}
const exec = () => {
const query = [];
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%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();
headers.append('Content-Type', 'application/pdf');
fetch(url, {
method: 'GET',
headers: headers
@@ -63,12 +63,12 @@ const DemoComponent13 = () => {
} 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);
}
@@ -79,22 +79,24 @@ const DemoComponent13 = () => {
}
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 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 style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br/>
<br/>
<WidgetsDropdown />
<br />
<br />
<WidgetsDropdown />
<CCard isolate="true">
<CCardBody>
<CRow>
@@ -356,7 +358,7 @@ const DemoComponent13 = () => {
</CCol>
</CRow>
<div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table">
<thead className="thead-light">
<tr>

+ 12
- 10
src/views/demoComponent/DemoComponent2.js 查看文件

@@ -13,7 +13,7 @@ import {
CCallout
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
//import PDFEngine from 'PDFEngine';
import PDFEngine from 'PDFEngine';

import MainChartExample from '../charts/MainChartExample.js';
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
@@ -21,7 +21,7 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))

const DemoComponent2 = () => {
const exec = () => {
console.log(PDFEngine());
const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2");
const dateNow = new Date();
fetch('https://localhost:7285/api/PDFGenerator/' + url)
@@ -57,17 +57,19 @@ const DemoComponent2 = () => {
}
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 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 style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br />
2

+ 10
- 10
src/views/demoComponent/DemoComponent3.js 查看文件

@@ -20,23 +20,23 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent3 = () => {
const exec = () =>
{
const exec = () => {
PDFEngine();
window.print();
}
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>
<br />
3

+ 11
- 10
src/views/demoComponent/DemoComponent4.js 查看文件

@@ -20,24 +20,25 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent4 = () => {
const exec = () =>
{
const exec = () => {
PDFEngine();
window.print();
}
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 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 style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br />
4

+ 23
- 18
src/views/demoComponent/DemoComponent5.js 查看文件

@@ -1,4 +1,4 @@
import React, { lazy, useRef, useState } from 'react';
import React, { lazy, useState } from 'react';
import {
CBadge,
CButton,
@@ -22,33 +22,37 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
const DemoComponent5 = () => {

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 = () => {
PDFEngine();
window.print();
}
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>

<br />
5
<br />
@@ -777,4 +781,5 @@ const DemoComponent5 = () => {
</>
);
}

export default DemoComponent5;

+ 14
- 15
src/views/demoComponent/DemoComponent6.js 查看文件

@@ -20,28 +20,27 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent6 = () => {
const exec = () =>
{
const exec = () => {
PDFEngine();
window.print();
}
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 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>
<br/>
<br/>
<WidgetsDropdown />
<br />
<br />
<WidgetsDropdown />
<CCard>
<CCardBody>
<CRow>
@@ -303,7 +302,7 @@ const DemoComponent6 = () => {
</CCol>
</CRow>
<div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" code="br-headereverypage">
<thead className="thead-light">
<tr>

+ 57
- 55
src/views/demoComponent/DemoComponent7.js 查看文件

@@ -20,69 +20,71 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent7 = () => {
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 (
<>
<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 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 style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br/>
<br/>
<WidgetsDropdown />
<br />
<br />
<WidgetsDropdown />
<CCard>
<CCardBody>
<CRow>
@@ -344,7 +346,7 @@ const DemoComponent7 = () => {
</CCol>
</CRow>
<div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" >
<thead className="thead-light">
<tr>

+ 16
- 15
src/views/demoComponent/DemoComponent8.js 查看文件

@@ -20,29 +20,30 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


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

const exec = () => {
PDFEngine();
window.print();
}
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 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 style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br/>
<br/>
<WidgetsDropdown />
<br />
<br />
<WidgetsDropdown />
<CCard>
<CCardBody>
<CRow>
@@ -304,7 +305,7 @@ const DemoComponent8 = () => {
</CCol>
</CRow>
<div>
<br />
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" >
<thead className="thead-light">
<tr>

+ 17
- 15
src/views/demoComponent/DemoComponent9.js 查看文件

@@ -26,7 +26,7 @@ const DemoComponent9 = () => {
const handleChange = (event) => {
setPaperFormat(event.target.value);
}
const handleChangeMargin = (event) => {
setMargins(event.target.value);
}
@@ -81,20 +81,22 @@ const DemoComponent9 = () => {
}
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>

Write Preview
Loading…
取消
儲存