> dotnet new react
spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000"); > create-react-app clientapp
> cd clientapp > npm install --save bootstrap axios
import "bootstrap/dist/css/bootstrap.css";
using Microsoft.AspNetCore.Mvc;
namespace DownloadFilesSample.Controllers
{
[Route("api/[controller]")]
public class ReportsController : Controller
{
[HttpGet("[action]")]
public IActionResult GetPdfReport()
{
return File(virtualPath: "~/app_data/sample.pdf",
contentType: "application/pdf",
fileDownloadName: "sample.pdf");
}
}
} const getResults = async () => {
const { headers, data } = await axios.get(apiUrl, {
responseType: "blob"
});
} import axios from "axios";
import React, { useEffect, useState } from "react";
export default function DisplayPdf() {
const apiUrl = "https://localhost:5001/api/Reports/GetPdfReport";
const [blobInfo, setBlobInfo] = useState({
blobUrl: "",
fileName: ""
});
useEffect(() => {
getResults();
}, []);
const getResults = async () => {
try {
const { headers, data } = await axios.get(apiUrl, {
responseType: "blob"
});
console.log("headers", headers);
const pdfBlobUrl = window.URL.createObjectURL(data);
console.log("pdfBlobUrl", pdfBlobUrl);
const fileName = headers["content-disposition"]
.split(";")
.find(n => n.includes("filename="))
.replace("filename=", "")
.trim();
console.log("filename", fileName);
setBlobInfo({
blobUrl: pdfBlobUrl,
fileName: fileName
});
} catch (error) {
console.log(error);
}
}; ontent-disposition: "attachment; filename=sample.pdf; filename*=UTF-8''sample.pdf"
import axios from "axios";
import React, { useEffect, useState } from "react";
export default function DisplayPdf() {
// ...
const { blobUrl } = blobInfo;
return (
<>
<h1>Display PDF Files</h1>
<button className="btn btn-info" onClick={handlePrintPdf}>
Print PDF
</button>
<button className="btn btn-primary ml-2" onClick={handleShowPdfInNewTab}>
Show PDF in a new tab
</button>
<button className="btn btn-success ml-2" onClick={handleDownloadPdf}>
Download PDF
</button>
<section className="card mb-5 mt-3">
<div className="card-header">
<h4>using iframe</h4>
</div>
<div className="card-body">
<iframe
title="PDF Report"
width="100%"
height="600"
src={blobUrl}
type="application/pdf"
></iframe>
</div>
</section>
<section className="card mb-5">
<div className="card-header">
<h4>using object</h4>
</div>
<div className="card-body">
<object
data={blobUrl}
aria-label="PDF Report"
type="application/pdf"
width="100%"
height="100%"
></object>
</div>
</section>
<section className="card mb-5">
<div className="card-header">
<h4>using embed</h4>
</div>
<div className="card-body">
<embed
aria-label="PDF Report"
src={blobUrl}
type="application/pdf"
width="100%"
height="100%"
></embed>
</div>
</section>
</>
);
} 
const handlePrintPdf = () => {
const { blobUrl } = blobInfo;
if (!blobUrl) {
throw new Error("pdfBlobUrl is null");
}
const iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = blobUrl;
document.body.appendChild(iframe);
if (iframe.contentWindow) {
iframe.contentWindow.print();
}
}; const handleShowPdfInNewTab = () => {
const { blobUrl } = blobInfo;
if (!blobUrl) {
throw new Error("pdfBlobUrl is null");
}
window.open(blobUrl);
}; const handleDownloadPdf = () => {
const { blobUrl, fileName } = blobInfo;
if (!blobUrl) {
throw new Error("pdfBlobUrl is null");
}
const anchor = document.createElement("a");
anchor.style.display = "none";
anchor.href = blobUrl;
anchor.download = fileName;
document.body.appendChild(anchor);
anchor.click();
}; //--------------انتخاب خودکار لینکهای بالای صفحه به ازای صفحه جاری
$(document).ready(function () {
$("#headermenu a").each(function () {
var $a = $(this);
var href = $a.attr("href");
if (href && (location.pathname.toLowerCase() == href.toLowerCase())) {
//صفحه جاری را یافتیم
$a.css({
"color": "Yellow",
"border-bottom": "1px solid"
});
}
});
});
$('body').tooltip({
selector: '[rel=tooltip]'
}); کنترلهای آماده و سبک ساخته شده با CSS برای استفاده در صفحات وب
نمایش دمو از کنترلها با انتخاب از منوی بالای صفحه
