本篇內(nèi)容介紹了“react打印樣式丟失如何解決”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、文成ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的文成網(wǎng)站制作公司

react打印樣式丟失的解決辦法：1、通過“npm install --save html2canvas npm install jspdf --save”命令安裝jspdf；2、使用jspdf將需要打印的div轉(zhuǎn)成pdf；3、使用react重新打印即可。

vue print打印div樣式丟失 (react通用)

使用網(wǎng)上的print.js插件，打印發(fā)現(xiàn)樣式丟失。

解決方案 > 將html轉(zhuǎn)成pdf，再打印pdf

使用jspdf將需要打印的div轉(zhuǎn)成pdf（轉(zhuǎn)成的pdf樣式不會丟失，因為pdf.js是將div轉(zhuǎn)成canvas）

安裝jspdf

npm install --save html2canvas

npm install jspdf --save

上代碼

utli.js 直接復(fù)制，注意outPutPdf方法入?yún)⒓纯?/p>

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
// base64轉(zhuǎn)blob
export function toBlob(base64Data) {
  let byteString = base64Data
  if (base64Data.split(',')[0].indexOf('base64') >= 0) {
    byteString = atob(base64Data.split(',')[1]); // base64 解碼
  } else {
    byteString = unescape(base64Data.split(',')[1]);
  }
  // 獲取文件類型
  const mimeString = base64Data.split(';')[0].split(":")[1]; // mime類型
  // ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數(shù)據(jù)緩沖區(qū)
  // let arrayBuffer = new ArrayBuffer(byteString.length) // 創(chuàng)建緩沖數(shù)組
  // let uintArr = new Uint8Array(arrayBuffer) // 創(chuàng)建視圖
  const uintArr = new Uint8Array(byteString.length); // 創(chuàng)建視圖
  for (let i = 0; i < byteString.length; i += 1) {
    uintArr[i] = byteString.charCodeAt(i);
  }
  // 生成blob
  const blob = new Blob([uintArr], {
    type: mimeString
  })
  // 使用 Blob 創(chuàng)建一個指向類型化數(shù)組的URL, URL.createObjectURL是new Blob文件的方法,可以生成一個普通的url,可以直接使用,比如用在img.src上
  return blob;
};
/**
 * 輸出pdf
 * @param {*} idName  html元素
 * @param {*} pdfName  輸出pdf文件名
 * @param {*} isDownload  是否直接下載
 * @param {*} isPrint 是否直接打印
 * @param {*} callback  執(zhí)行后的回調(diào)  
 */
 export function outPutPdf(idName, pdfName, isDownload = false, isPrint = false, callback) {
  const element = document.getElementById(idName);  // 這個dom元素是要導(dǎo)出的pdf的div容器
  const w = element.offsetWidth;  // 獲得該容器的寬
  const h = element.offsetHeight;  // 獲得該容器的高
  const offsetTop = element.offsetTop; // 獲得該容器到文檔頂部的距離  
  const offsetLeft = element.offsetLeft; // 獲得該容器到文檔最左的距離
  const canvas = document.createElement("canvas");
  let abs = 0;
  const winI = document.body.clientWidth; // 獲得當前可視窗口的寬度（不包含滾動條）
  const winO = window.innerWidth; // 獲得當前窗口的寬度（包含滾動條）
  if (winO > winI) {
    abs = (winO - winI) / 2; // 獲得滾動條寬度的一半
  }
  canvas.width = w * 2; // 將畫布寬&&高放大兩倍
  canvas.height = h * 2;
  const context = canvas.getContext('2d');
  context.scale(2, 2);
  context.translate(-offsetLeft - abs, -offsetTop);
  // 這里默認橫向沒有滾動條的情況，因為offset.left()，有無滾動條的時候存在差值，因此translate的時候，要把這個差值去掉
  html2canvas(element, {
    useCORS: true, // 允許加載跨域的圖片
    allowTaint: true,
    scale: 2 // 提升畫面質(zhì)量，但是會增加文件大小
  }).then(cs => {
    const contentWidth = cs.width;
    const contentHeight = cs.height;
    // 一頁pdf顯示html頁面生成的canvas高度
    const pageHeight = contentWidth / 592.28 * 841.89;
    // 未生成pdf的html頁面高度
    let leftHeight = contentHeight;
    // 頁面偏移
    let position = 0;
    // a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
    const imgWidth = 595.28;
    const imgHeight = 592.28 / contentWidth * contentHeight;
    const pageDate = cs.toDataURL('image/jpeg', 1.0);
    const pdf = new jsPDF('', 'pt', 'a4');
    // 有兩個高度需要區(qū)分，一個是html頁面的實際高度，和生成pdf的頁面的高度（841.89）
    // 當內(nèi)容未超過pdf一頁顯示的范圍，無需分頁
    if (leftHeight < pageHeight) {
      pdf.addImage(pageDate, 'JPEG', 0, position, imgWidth, imgHeight);
    } else { // 分頁
      while (leftHeight > 0) {
        pdf.addImage(pageDate, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight;
        position -= 841.89;
        // 避免添加空白頁
        if (leftHeight > 0) {
          pdf.addPage()
        }
      }
    }
    if (isDownload) {
      pdf.save(`${pdfName}.pdf`);
    } 
    if (isPrint) {
      const link = window.URL.createObjectURL(toBlob(pdf.output('datauristring')));
            const myWindow = window.open(link);
      myWindow.print();
    }
    callback && callback(pdf);
  })
}

需要打印部分