本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言：

由于业务需求，将页面内容转成pdf；并且是公司提供模板，客户填写完相应信息后，由前端通过网络请求提交给后端。

1.0版本是前端、后端各存一份文档模板，但是这样公司一改模板，前后端就得两份一起修改。 2.0版本是由后端将文档存储到静态资源服务器，前端通过网络获取模板，一旦修改了某些字段，在静态资源服务器的模板一样要替换，而且前端也没有权限，还是非常的麻烦。

3.0目前想出的最优解便是由前端存储模板，在用户输入完信息提交时，把整个vue页面的dom元素及填入的相关信息，一同提交给后端，后端也无需关心填入的信息内容，直接转换成pdf。此操作可行，但样式并不是在行内而是在<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
}

最后可以和html文件一样在元素标签后加上style样式。

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

前言：

解决方案：