如何在浏览器中查看图像/ pdf并在浏览器中加载后显示下载对话框？

Question

我想要一个链接，在浏览器中打开一个图像/ pdf并加载后，显示一个选项对话框以下载它。可能吗？

我当前的锚点：

echo "<a href='".base_url()."assets/uploads/".$record->file_upload.".".substr($record->original_name, -3)."' id='txt_upl' download>"; 
echo $record->original_name; 
echo "</a>"; 

Answer 1

我发现这个PDF.js libary，也许这是你在找什么：

http://mozilla.github.io/pdf.js/getting_started/

Answer 2

您需要使用的JavaScript库分析和呈现PDF文件。您可以使用pdf.js来达到此目的。

，你需要做的大纲：

• 在你的页面
• 开始添加pdf.js库保持在页面的PDF下载链接，但隐藏它
• 加载和渲染在将PDF网址传递给它后，使用pdf.js的pdf。
• pdf.js返回promises，因此您可以在完成加载或呈现PDF后完成额外的工作。
• 现在您取消隐藏下载链接。

我给如何使用pdf.js一个例子，它是如何返回的承诺（点击“运行代码片段”的通知后控制台日志）

我还添加在JS代码中的注释，你可能会添加额外的代码来取消隐藏下载链接。

var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf'; 
 
//load the pdf 
 
var loadingTask = PDFJS.getDocument(url); 
 
loadingTask.promise.then(function(pdf) { 
 
    console.log('PDF loaded'); 
 
    //load the page 
 
    var pageNumber = 1; 
 
    pdf.getPage(pageNumber).then(function(page) { 
 
    console.log('Page loaded'); 
 
    var scale = .5; 
 
    var viewport = page.getViewport(scale); 
 
    // Prepare canvas using PDF page dimensions 
 
    var canvas = document.getElementById('the-canvas'); 
 
    var context = canvas.getContext('2d'); 
 
    canvas.height = viewport.height; 
 
    canvas.width = viewport.width; 
 
    // Render PDF page into canvas context 
 
    var renderContext = { 
 
     canvasContext: context, 
 
     viewport: viewport 
 
    }; 
 
    var renderTask = page.render(renderContext); 
 
    renderTask.then(function() { 
 
     console.log('Page rendered. changing the visibility of download link'); 
 
     //====================================================================== 
 
     //SO NOW THE PDF IS LOADED AND RENDERED. HERE YOU NEED TO ADD EXTRA JAVASCRIPT CODE TO SHOW THE DOWNLOAD LINK 
 
     document.getElementById("dlink").style.visibility = "visible"; 
 
     //====================================================================== 
 
    }); 
 
    }); 
 
}, function (reason) { 
 
    // PDF loading error 
 
    console.error(reason); 
 
});

#the-canvas { 
 
    border:1px solid black; 
 
} 
 
#dlink { 
 
    visibility:hidden; 
 
}

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> 
 
<canvas id="the-canvas"></canvas> 
 
<br> 
 
<a href="//cdn.mozilla.net/pdfjs/helloworld.pdf" id="dlink" download>Download</a>