在前端 HTML 展示和下载 PDF 文件

1，下载功能

PDF 文件以 Base64 格式存储，使用 js 在前端下载，关键代码：

<script type="text/javascript">
	var pdf = Pdf_Base64内容;
	var href = "data:application/pdf;base64," + pdf;
	
	// 创建一个 a 标签
	var link = document.createElement("a");
	link.href = href;
	link.download = 下载时的默认文件名;
	link.target = "_blank";
	// link.text = "点击下载";
	
	// 追加到 body
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
</script>

代码执行后的效果如下：

2，浏览功能

PDF 文件以 Base64 格式存储，想要实现的功能是，在前端弹出一个框框，来浏览 PDF 文件，这里使用了 EasyUI 创建，关键代码：

首先需要一个 DIV，里面嵌套一个 iframe：

<div id="pdfShow">
    <div>
        <iframe id="iframePdf" width="100%" height="500px"></iframe>
    </div>
</div>

js 代码，使用了 EasyUI 的 dialog 组件：

// 弹框显示 PDF
var pdf = Pdf_Base64内容;
pdf = "data:application/pdf;base64," + pdf;

// 给 iframe 的 src 属性赋值
$("#iframePdf").attr("src", pdf);

// 使用 EasyUI 弹框
$('#pdfShow').dialog({
    
    
    title: '弹窗标题',
    width:900, height:600,
    closed: false, cache: false, modal: true,
    collapsible: true,
    minimizable: true,
    maximizable: true,
    resizable: true,
    buttons:[{
    
    
        text:'关闭',
        handler:function(){
    
    
            $('#pdfShow').dialog("close");
        }
    }]
}).dialog("open");

代码执行后的效果如下：

还可以在一个新页面展示 PDF：

var pdf = Pdf_Base64内容;
pdf = "data:application/pdf;base64," + pdf;

// 打开新页面
var newWin = window.open('', '_blank');

// 创建一个 iframe
link = document.createElement("iframe");
link.src = pdf;
link.style.width = "100%";
link.style.height = "100%";

// 追加到新窗口
newWin.document.body.appendChild(link);