ブラウザでイメージ/ 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

私は多分、これはあなたが探しているもので、これはlibary PDF.jsが見つかりました：

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

Answer 2

あなたがのためのJavaScriptライブラリを使用する必要がありますPDFの解析とレンダリングこの目的でpdf.jsを使用できます。あなたが何をする必要があるかの

概要：

• ページでPDFのダウンロードリンクを維持するが、それは隠し作る
• 負荷およびレンダリングページの先頭
• でpdf.jsライブラリを追加pdf URLを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>