核心思路:在iframe标签中显示预览的内容。
思路:iframe相当于一个浏览器的一个新的页签,大家都知道PDF可以在浏览器中打开查看,也就是可以预览,所以当前页面中加入一个iframe就可以实现预览了。
新页签是用location.href指定文件地址,iframe是改src来指定文件地址或者通过location.href指定,具体如下。
此时有个问题,如果是二进制文件流,该如何预览呢?使用URL.createObjectURL(blob);就可以生成一个url,然后再赋值给iframe的src就可以了。
// 通过location.href指定地址
window.preview.location.href = url; // preview是iframe的name属性值
// 通过src指定地址, 建议使用这种方式
oIframe.src = url; // oIframe是iframe的Dom对象
// 如果是文件流,或者文件,用window.URL.createObjectURL生成一个url
const url = window.URL.createObjectURL(fileBlob);
// url使用完成(关闭预览)时,尽量使用window.URL.revokeObjectURL(url)销毁前面生成的url,防止内存泄漏
完整例子如下:
<div class="wrap">
<button onclick="show()">预览</button>
<button onclick="closeIframe()">关闭</button>
<button onclick="download()">下载</button>
<input id="previewFileInput" type="file" accept=".png,.jpeg,.jpg,.pdf" />
<button onclick="showFile()">预览文件</button>
<iframe src="" id="jj" name="jj" frameborder="0" style="width: 100%; height: 80vh;"></iframe>
</div>
const url = "https://img2022.cnblogs.com/blog/35695/202202/35695-20220218195518714-1211340510.jpg";
const oIframe = document.getElementById("jj");
function closeIframe() {
// window.jj.location.href = ''; // jj是iframe的name属性值
// window.jj.close(); // jj是iframe的name属性值
oIframe.style.display = 'none';
function downLoad(url) {
var oA = document.createElement("a");
oA.download = ""; // 设置下载的文件名,默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
function download() {
downLoad(url);
function show() {
// window.jj.location.href = url; // jj是iframe的name属性值
oIframe.src = url; // jj是iframe的name属性值
oIframe.style.display = 'block';
function showFile() {
// 如果元素有id,可以直接用id的值访问元素哦~ 例如: previewFileInput
if (!previewFileInput.files) {
alert('请选择预览文件撒');
return;
const url = window.URL.createObjectURL(previewFileInput.files[0]);
oIframe.src = url;
oIframe.style.display = 'block';