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';
}