react中使用printJS出現內聯樣式丟失

問題

在react中使用printjs時，假如html標籤上寫的是內聯樣式，需要要加上targetstyles這個屬性，使得標籤的元素繼承目標html樣式；

"print-box"

style
=}>
titlediv
>

printjs()

;

那麼，我們不禁想到，為什麼還需要這麼乙個屬性呢？按照最普通的列印方法，如下操作即可：

window.document.body.innerhtml = window.document.

getelementbyid
('print-box'
).innerhtml;
window.
print()
;window.location.
reload()
;

截圖了一段printjs的init函式裡的原始碼，我們可以看到，外掛程式給我們建立了乙個iframe，在iframe裡邊執行window.print()，不就解決了瀏覽器重新整理的問題了嘛；

然後通過深層遍歷複製了目標元素，放到了建立好的iframe裡邊

而在深層遍歷複製標籤的時候，並不會把標籤上的屬性複製到模板html裡，所以就有了下面的函式，params.scanstyles屬性預設是true,那麼我們看一下collectstyles函式做了什麼？

喲，找到正主了。這個函式裡邊就有targetstyles屬性，假如設定*,匹配所有的style內聯樣式屬性；

總結targetstyles屬性是printjs提供乙個可選引數，在我們使用內聯樣式的時候開啟即可；但printjs作為乙個強大的列印外掛程式，也需要考慮class樣式的**，也可以通過引入css外部樣式檔案來實現樣式覆蓋，所以styles屬性也就有了非必選引數了。

react中使用swiper外掛程式

最近在寫react的demo，遇到了需要滑動的功能，引入了swiper，但是在引入的時候一直報錯 安裝的時候是這樣的 npm install swiper網上查的是這樣引入的 import swiper from swiper dist js swiper.js import swiper dist...

React中使用Antd元件

antd的高階配置 antd的自定義主題 在react專案中進行安裝yarn add antd或者npm i antd安裝 import react,from react import from antd 引入按鈕 import antd dist antd.css 還需要引入css樣式 目的是不用...

在 React 中使用 Typescript

用 typescript 寫 react 可比寫 vue 舒服太多了，react 對 ts 的支援可謂天生搭檔，如果要用 ts 重構專案，不像 vue 對專案破壞性極大，react 可以相對輕鬆的實現重構。如在已有專案中使用typescript，需要手動安裝 typescript types rea...