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

我想有一个链接，可以在浏览器中打开图像/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>";

echo”“；

我找到了这个PDF.js库，也许这就是你要找的：

---

您需要使用javascript库来解析和呈现PDF。您可以为此目的使用

概述您需要做的事情：

• 在页面开头添加pdf.js库
• 在页面中保留pdf下载链接，但将其隐藏
• 将pdf URL传递给pdf后，使用pdf.js加载并呈现pdf
• js返回，因此在它完成加载或呈现pdf后，您可以执行额外的操作
• 现在您可以取消隐藏下载链接

我给出了一个如何使用pdf.js以及它如何返回承诺的示例（请注意单击“运行代码片段”后的控制台日志）

我还在JS代码中添加了一条注释，您可以添加额外的代码来取消隐藏下载链接

var url='//cdn.mozilla.net/pdfjs/helloworld.pdf'；
//加载pdf
var loadingTask=PDFJS.getDocument（url）；
loadingTask.promise.then（函数（pdf）{
console.log（'PDF-loaded'）；
//加载页面
var pageNumber=1；
getPage（页码）。然后（函数（第页）{
console.log（“页面加载”）；
var量表=.5；
var viewport=page.getViewport（比例）；
//使用PDF页面维度准备画布
var canvas=document.getElementById（'the-canvas'）；
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
//将PDF页面呈现到画布上下文中
var renderContext={
背景：背景，
视口：视口
};
var renderTask=page.render（renderContext）；
renderTask.then（函数（）{
log（'页面呈现。更改下载链接的可见性'）；
//======================================================================
//现在PDF已经加载并呈现了，这里需要添加额外的JAVASCRIPT代码来显示下载链接
document.getElementById（“dlink”）.style.visibility=“可见”；
//======================================================================
});
});
}，功能（原因）{
//PDF加载错误
控制台错误（原因）；
});
#画布{
边框：1px纯黑；
}
#数据链路{
可见性：隐藏；
}



firefox和chrome在浏览器中显示pdf后自动显示下载选项。但是，您必须从
标记中删除
下载
属性。如果有
download
，浏览器将不会显示它并提示下载。