js页面导出为pdf

安装js库

npm install html2pdf.js

示例代码

<template>
  <div class="home">
    <div class="banner" v-for="item in 10"></div>
    <div id="chart-container" style="width: 400px; height: 300px;"></div>
    <button @click="html2pdfHandel">html2pdfHandel</button>
  </div>
</template>

<script>

import html2pdf from 'html2pdf.js';

export default {
  name: 'HomeView',

  data() {
    return {
     

    };
  },
  created() {
   
  },
  mounted() {
   
  },
  methods: {
  
    html2pdfHandel() {
      const element = this.$el; // 获取当前组件的根元素

      html2pdf()
        .set({
          filename: 'document.pdf',
          margin: [10, 10], // 设置页面边距
        })
        .from(element)
        .save(); // 将整个页面内容转换为PDF并下载
    },
    

  }
};
</script>
<style>
.banner {
  width: 100%;
  height: 200px;
  margin: 20px 0;
  background-color: pink;
}
</style>

效果

这里使用了echarts,示例代码里面我删除了相关代码,只保留了核心代码