Vue生成PDF文件的方法

那就这样吧932

已于 2024-03-01 16:17:13 修改

阅读量206

点赞数 5

文章标签： vue.js pdf javascript

于 2024-03-01 08:51:16 首次发布

本文链接：https://blog.csdn.net/weixin_62296717/article/details/136386043

版权

话不多说，直接上代码！

<template>
    <div>
      <el-button
         type="text"
         @click="ExportSavePdf()">
        结果导出
        </el-button>

      <div id="pdfCentent">
        <!--  给需要转化为pdf文件的内容放进去并设一个id作为唯一标识 -->
        <h1>我是转化为PDF文件的内容</h1>
      </div>
     </div>
</template>

<script>
export default {
    data() {
        return{

        },
    methods: {
        ExportSavePdf() {
          let subOutputRankPrint = document.getElementById('pdfCentent') // 获取 id 为 ‘pdfCentent’ 的元素
          let newContent = subOutputRankPrint.innerHTML // 这段代码将获取到 subOutputRankPrint 元素包含的 HTML 内容，并将其赋值给 newContent 变量
          let oldContent = document.body.innerHTML // 这段代码将获取到整个页面 <body> 元素的内部 HTML 内容，并将其赋值给 oldContent 变量
          document.body.innerHTML = newContent // 将整个页面 <body> 元素的内部 HTML 内容替换为 newContent 的值
          window.print() // 触发浏览器的打印功能，用于打印当前页面内容
          window.location.reload() // 重新加载当前页面，实现页面的刷新操作
          document.body.innerHTML = oldContent // 将之前获取到的 HTML 内容赋值给 document.body.innerHTML，恢复页面的原始内容
          return false
    },

  },
 }
}
</script>

但是上面的方法会破坏掉vue的机制，打印完毕后必须刷新页面才能恢复

以下为效果图 ↓