 |
php codeigniter ปัญหาการแสดงไฟล์ PDF บนอุปกรณ์ต่างๆ |
| |
 |
|
|
 |
 |
|
 ตอบความคิดเห็นที่ : 1 เขียนโดย : mr.v เมื่อวันที่ 2024-05-27 16:56:21
รายละเอียดของการตอบ ::
ไม่ได้เหมือนกันครับ ตอนนี้แก้ไขโดยการเช็คจากอุปกรณ์เอาครับ
Code
<?php
$this->load->library('Browser');
$this->load->library('user_agent');
// Example usage of the modified platform method
$platform = $this->agent->platform();
$browser = new Browser();
if( $browser->getBrowser() == Browser::PLATFORM_IPAD OR $browser->getBrowser() == Browser::PLATFORM_IPHONE OR $platform=='Mac OS X' OR $platform=='This iOS Platform' ) {
?>
<script type="module">
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = '<?php echo base_url();?>File_document/<?php echo $row['Send_file'];?>';
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var { pdfjsLib } = globalThis;
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '<?php echo base_url();?>assets/js/pdfjs/build/pdf.worker.mjs';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.5,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
function renderPage(num) {
pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport,
background: 'rgba(0,0,0,0)'
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
// Update page counters
document.getElementById('page_num').textContent = num;
}
/**
* If another page rendering in progress, waits until the rendering is
* finised. Otherwise, executes rendering immediately.
*/
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
function slideToNextPage() {
if (currentPage < pdfDoc.numPages) {
currentPage++;
slidePage(currentPage);
}
}
function slideToPrevPage() {
if (currentPage > 1) {
currentPage--;
slidePage(currentPage);
}
}
function slidePage(pageNum) {
pdfDoc.getPage(pageNum).then(function(page) {
const viewport = page.getViewport({ scale: scale });
pdfContainer.height = viewport.height;
pdfContainer.width = viewport.width;
const canvasContext = pdfContainer.getContext('2d');
pdfContainer.height = viewport.height;
pdfContainer.width = viewport.width;
const renderContext = {
canvasContext,
viewport
};
// Start sliding animation
let slideStep = 0;
const slideSpeed = 5; // Adjust the slide speed as needed
const slideInterval = setInterval(function() {
if (slideStep < viewport.width) {
slideStep += slideSpeed;
viewport.transform[4] = -slideStep;
page.render(renderContext);
} else {
clearInterval(slideInterval);
currentPage = pageNum;
}
}, 16); // 60 frames per second
});
}
/**
* Displays previous page.
*/
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
/**
* Displays next page.
*/
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* Asynchronously downloads PDF.
*/
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
if(pdfDoc.numPages == 1){
$('#prev').attr('disabled','disabled');
$('#next').attr('disabled','disabled');
}
if(pageNum == 1){
$('#prev').attr('disabled','disabled');
}
if(pageNum == pdfDoc.numPages){
$('#next').attr('disabled','disabled');
}
$('#prev').click(function(){
if(pageNum == 1){
$('#prev').attr('disabled','disabled');
}else{
$('#prev').removeAttr('disabled');
}
if(pageNum < pdfDoc.numPages){
$('#next').removeAttr('disabled');
}
});
$('#next').click(function(){
if(pageNum == 1){
$('#prev').attr('disabled','disabled');
}else{
$('#prev').removeAttr('disabled');
}
if(pageNum == pdfDoc.numPages){
$('#next').attr('disabled','disabled');
}
});
});
</script>
<center>
<a href="<?php echo base_url();?>File_document/<?php echo $row['Send_file'];?>" class="btn btn-primary" target="_blank"><i class="fas fa-download"></i> ดาวน์โหลดไฟล์ pdf</a>
<a href="<?php echo base_url();?>e_office/print_doc_in/<?php echo $row['ds_id'];?>/<?php echo $row['dsd_id'];?>" class="btn btn-primary" target="_blank"><i class="fas fa-print"></i> Print pdf</a>
</center>
<div class="text-center mt-2">
<button id="prev" class="click-page btn btn-info btn-sm"><i class="fas fa-chevron-circle-left"></i> ก่อนหน้า</button>
<button id="next" class="click-page btn btn-info btn-sm">ถัดไป <i class="fas fa-chevron-circle-right"></i></button>
<br>
<span>หน้า: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="the-canvas" style="width:100%;" class="mt-2"></canvas>
|
 |
 |
 |
 |
| Date :
2024-05-28 10:06:26 |
By :
comsc006 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ลองวิธีนี้ดู
Code (PHP)
<embed src="<?php echo base_url('doc/'.$row['s_file']);?>#view=fitH,100&navpanes=0" type="application/pdf" width="100%" height="800px" style="border:1px solid #ddd;border-radius:8px;"/></div>
อีกทางเลือก Front End:
https://pdfobject.com/examples/basic.html
|
| |
|
|
| |
| Date :
2024-05-30 12:01:25 |
By :
Guest |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
