成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

瀏覽器端用JS實(shí)現(xiàn)創(chuàng)建和下載圖片

blair / 763人閱讀

摘要：尤其是通過生成文件內(nèi)容，然后通過瀏覽器端執(zhí)行下載的操作。日前，項(xiàng)目中就遇到了這類需求，在瀏覽器端實(shí)現(xiàn)保存當(dāng)前網(wǎng)頁為圖片，然后還可以下載。提供了一種創(chuàng)建對象的方法，但是兼容性堪憂，絕大部分瀏覽器都沒有實(shí)現(xiàn)。

問題場景

在前端很多的項(xiàng)目中，文件下載的需求很常見。尤其是通過JS生成文件內(nèi)容，然后通過瀏覽器端執(zhí)行下載的操作。如圖片，Execl 等的導(dǎo)出功能。日前，項(xiàng)目中就遇到了這類需求，在瀏覽器端實(shí)現(xiàn)保存當(dāng)前網(wǎng)頁為圖片，然后還可以下載。

解決方案 網(wǎng)頁生成圖片

這里可以采用 html2canvas 來實(shí)現(xiàn)。并且可以兼容大部分主流的瀏覽器。

Firefox 3.5+

Google Chrome

Opera 12+

IE9+

Safari 6+

文件下載 第一種方案

HTML5 新增了 download 屬性，只要給 download 加上想要導(dǎo)出的文件名即可。如 download="file.jpg"。想要詳細(xì)的了解此屬性，可以參考 張鑫旭 寫的一篇博文，傳送門。

簡單代碼實(shí)現(xiàn)如下：

import html2canvas from "html2canvas";

// 生成圖片，并自動(dòng)下載
function captureScreenshot() {
  const preview = document.querySelector(".preview-graphs");
  html2canvas(preview).then((canvas) => {
      var img = document.createElement("a");
      img.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      // 下載的文件名字
      img.download = `file.jpg`;
      img.click();
    })  
}

Note:上述實(shí)現(xiàn)，目前只有 Google Chrome 功能是正常的。兼容性存在很大的問題。

第二種方案

這里可以采用 FileSaver.js。需以 Blob 的形式來進(jìn)行保存。canvas 提供了一種創(chuàng)建 Blob 對象的方法 canvas.toBlob((blob) => {}) ，但是兼容性堪憂，絕大部分瀏覽器都沒有實(shí)現(xiàn)。因此官網(wǎng)特意提供了這樣的一個(gè)庫，canvas-toBlob.js。

FileSaver.js is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client, However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatible. - 摘自官網(wǎng)
FileSaver.js 是在客戶端保存文件的解決方案，非常適合在客戶端生成文件的Web應(yīng)用程序，但是如果文件來自服務(wù)器，我們建議您首先嘗試使用 Content-Disposition 附件響應(yīng) 標(biāo)題，因?yàn)樗懈嗟目鐬g覽器兼容。

可以兼容主流的瀏覽器，如 Firefox，Chrome，Edge，IE 10+ 等。

代碼實(shí)現(xiàn)如下：

import html2canvas from "html2canvas";
import FileSaver from "file-saver";

// 這里沒有用 canvas-toBlob.js
// base64 轉(zhuǎn)換成 Blob
function dataURLToBlob(dataURL) {
  var BASE64_MARKER = ";base64,";
  var parts;
  var contentType;
  var raw;

  if (dataURL.indexOf(BASE64_MARKER) === -1) {
    parts = dataURL.split(",");
    contentType = parts[0].split(":")[1];
    raw = decodeURIComponent(parts[1]);

    return new Blob([raw], {type: contentType});
  }

  parts = dataURL.split(BASE64_MARKER);
  contentType = parts[0].split(":")[1];
  raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], {type: contentType});
}

// 生成圖片，并自動(dòng)下載
function captureScreenshot() {
  const preview = document.querySelector(".preview-graphs");
  html2canvas(preview).then((canvas) => {
     const fileBlob = dataURLToBlob(canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"));
     const fileName = `file.jpg`;
     FileSaver.saveAs(fileBlob, fileName);
  });  
}
相關(guān)鏈接

Blob

HTMLCanvasElement.toBlob()

HTMLCanvasElement.toDataURL()

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101133.html

相關(guān)文章

  • 前端實(shí)現(xiàn)圖片下載

    摘要：測試說明位位位位服務(wù)端實(shí)現(xiàn)下載通過修改響應(yīng)頭，告訴瀏覽器這個(gè)請求回來的是個(gè)附件。控制用戶請求所得的內(nèi)容存為一個(gè)文件的時(shí)候提供一個(gè)默認(rèn)的文件名，文件直接在瀏覽器上顯示或者在訪問時(shí)彈出文件下載對話框。 測試說明 Chrome 65.0.3325.181 (64 位) Chrome 69.0.3497.92 (64 位) IE 11.0.9600.19002 (64 位) Firefox ...

    MingjunYang 評論0 收藏0

  • 在瀏覽器端用H5實(shí)現(xiàn)圖片壓縮上傳

    摘要：一需求的場景在我們的需求中需要有一個(gè)在手機(jī)瀏覽器端，用戶實(shí)現(xiàn)上傳證件照片的功能，我們第一版上了一個(gè)最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務(wù)器上。 一、需求的場景： 在我們的需求中需要有一個(gè)在手機(jī)瀏覽器端，用戶實(shí)現(xiàn)上傳證件照片的功能，我們第一版上了一個(gè)最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務(wù)器上。 功能實(shí)現(xiàn)后我們發(fā)現(xiàn)一個(gè)問題，公司公共的服務(wù)器有2M...

    snowLu 評論0 收藏0

  • 在瀏覽器端用H5實(shí)現(xiàn)圖片壓縮上傳

    摘要：一需求的場景在我們的需求中需要有一個(gè)在手機(jī)瀏覽器端，用戶實(shí)現(xiàn)上傳證件照片的功能，我們第一版上了一個(gè)最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務(wù)器上。 一、需求的場景： 在我們的需求中需要有一個(gè)在手機(jī)瀏覽器端，用戶實(shí)現(xiàn)上傳證件照片的功能，我們第一版上了一個(gè)最簡版，直接讓用戶在本地選擇圖片，然后上傳到公司公共的服務(wù)器上。 功能實(shí)現(xiàn)后我們發(fā)現(xiàn)一個(gè)問題，公司公共的服務(wù)器有2M...

    Flink_China 評論0 收藏0

  • 使用JavaScript將當(dāng)前頁面保存成PDF，支持圖片和文字的保存

    摘要：前端開發(fā)的朋友們可能會(huì)遇到這個(gè)需求將您負(fù)責(zé)開發(fā)的網(wǎng)頁的全部內(nèi)容，包括文字和圖片，一起保存成一個(gè)文件。在您的前端頁面里畫一個(gè)按鈕，用于觸發(fā)將當(dāng)前網(wǎng)頁保存成文件的事件。 前端開發(fā)的朋友們可能會(huì)遇到這個(gè)需求：將您負(fù)責(zé)開發(fā)的網(wǎng)頁的全部內(nèi)容，包括文字和圖片，一起保存成一個(gè)PDF文件。如果采用屏幕截圖的話，默認(rèn)Windows操作系統(tǒng)的截圖按鈕無法完整截取超過一屏幕的屏幕內(nèi)容。 我在網(wǎng)上找了一段時(shí)間...

    animabear 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<