vue3实现下载滚动页面的全部内容

npm install html2canvas

<template>
  <div ref="contentToCapture" class="scrollable-content">
    <!-- Your scrollable content here -->
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.content }}
    </div>
  </div>
  <button @click="captureAndDownload">Download as Image</button>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      items: [
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' },
        { id: 3, content: 'Item 3' },
        // Add more items as needed
      ]
    };
  },
  methods: {
    async captureAndDownload() {
      const element = this.$refs.contentToCapture;
      
      // Ensure the element is fully visible and not clipped
      element.style.height = 'auto';
      element.style.overflow = 'visible';

      const canvas = await html2canvas(element, {
        useCORS: true,
        scale: 2, // Increase the scale for better quality
        windowWidth: document.documentElement.scrollWidth,
        windowHeight: document.documentElement.scrollHeight,
      });

      const image = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.href = image;
      link.download = 'captured-content.png';
      link.click();

      // Restore the original styles
      element.style.height = '';
      element.style.overflow = '';
    }
  }
};
</script>

<style>
.scrollable-content {
  width: 100%;
  max-height: 400px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
</style>

我的代码参考了上图 

实际代码如下图所示：