js在当前页面预览PDF或图片

核心思路：在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">
  <p>
    <button onclick="show()">预览</button>
    <button onclick="closeIframe()">关闭</button>
    <button onclick="download()">下载</button>
  </p>
  <p>
    <input id="previewFileInput" type="file" accept=".png,.jpeg,.jpg,.pdf" />
    <button onclick="showFile()">预览文件</button>
  </p>
  <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';
}

js在当前页面预览PDF或图片

推荐阅读