在js中获取vue文件的style标签下的内容

前言：

由于业务需求，将页面内容转成pdf，前端需要提供整个页面的dom元素提供给后端，但样式并不是在行内而是在<style>标签里。

---

解决方案：

通过原生属性 document.styleSheets 读取vue单页面组件加载过的所有css样式

const cssBlock = document.styleSheets

有了获取到的css样式表就能遍历去找到我需要的，由于是伪数组，我们先用ES6解构一下；点开可以发现他的顺序是从页面初始化开始，大概率我们需要的样式会在最后，所以我们用reverse先反转，再通过find去遍历。

遍历后我们可以通过我们需要得样式去获取那一组件的样式。以下是完整代码。

function getCssBlock() {
  const cssBlock = document.styleSheets
  const styleData = [...cssBlock].reverse().find(({ cssRules }) => {
    return [...cssRules].find((rule) => {
      return ['.voucher_head'].includes(rule.selectorText)
    })
  })
  return styleData.ownerNode.innerText
}