瀏覽代碼

Added dropdown

master
Igor_Budimski 4 年之前
父節點
當前提交
31efca93b8
共有 2 個文件被更改,包括 31 次插入32 次删除
  1. 28
    29
      src/views/demoComponent/DemoComponent10.js
  2. 3
    3
      src/views/demoComponent/DemoComponent9.js

+ 28
- 29
src/views/demoComponent/DemoComponent10.js 查看文件

import React, { lazy, useState } from 'react';
import React, { lazy, useEffect, useState } from 'react';
import { import {
CBadge, CBadge,
CButton, CButton,




const DemoComponent10 = () => { const DemoComponent10 = () => {
const [paperFormat, setPaperFormat] = useState(0);
const [inputValue, setInputValue] = useState("");
const [checkValue, setCheckValue] = useState(false);


const handleChange = (event) => {
if (!isNaN(event.target.value)) {
setPaperFormat(event.target.value);
setInputValue(event.target.value);
} else {
alert('Not a number');
setInputValue("");
}
const handleChange = (e) => {
setCheckValue(e.target.value);
} }

useEffect(()=>{
console.log(checkValue);
}, [checkValue])

const exec = () => { const exec = () => {
const query = [];
// query.push("MarginTop=100 mm");
const query = [];
query.push(`Landscape=${checkValue}`);
// 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%2FDemoComponent10'+queryString);
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent10' + 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 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' }}> <div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4> <h4>PDFEngine</h4>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}> <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} />
<select value={checkValue} onChange={handleChange} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
<option value="false">Portrait</option>
<option value="true">Landscape</option>
</select>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button> <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</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" isolate="true"> <table className="table table-hover table-outline mb-0 d-sm-table" isolate="true">
<thead className="thead-light"> <thead className="thead-light">
<tr> <tr>

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

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 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: '70%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '100%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}> <div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4> <h4>PDFEngine</h4>
</div> </div>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button> <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div> </div>
</div> </div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '30%', padding: '5px' }}>
</div>
{/* <div style={{ backgroundColor: 'white', minHeight: '100%', width: '30%', padding: '5px' }}>
</div> */}
</div> </div>
<br/> <br/>
<br/> <br/>

Loading…
取消
儲存