html-to-image 插件 ——html转换成图片

最新推荐文章于 2024-05-17 09:55:27 发布

杭卿迟

最新推荐文章于 2024-05-17 09:55:27 发布

阅读量1.1k

点赞数

文章标签： html 前端

原文链接：https://blog.csdn.net/qq_43291759/article/details/129078590

版权

本文参考链接源自

首先确保数据加载完全，不然截图会不全，对于表格来说，安卓生成图片没有问题，ios生成图片最后一行表格数据可能会显示不全，所以最好在表格最后一行补充一行空白行。

不适用html2canvas插件是因为，插件图片样式会错乱，比如表格数据换行，生成的图片样式就会错乱。

安装

npm install --save html-to-image

使用

<template>
   <table ref="table">
       
    </table>
</template>
<script>
export default {
    methods: {
        generateImage(name = "图片") {
            // 只做了app 
           if (!window.plus) {
               this.$toast('请在app中生成');
               return;
          }
          const table = this.$refs.table;
          htmlToImage.toPng(table, { quality: 0.95 })
            .then((dataUrl) => {
              // dataUrl 图片的base64形式
              // 采用原生图片对象将base64图片转换为本地图片地址
              // https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap
              const bitmap = new window.plus.nativeObj.Bitmap();
              // 加载Base64编码格式图片到Bitmap对象
              bitmap.loadBase64Data(dataUrl, () => {
              // eslint-disable-next-line no-useless-concat
                bitmap.save(`_doc/${name}.png`, {
                  overwrite: true,
                  quality: 10
                }, (i) => {
                  // 此时 i.target会变成file://图片地址
                  window.plus.gallery.save(
                    i.target,
                    () => {
                     // 保存成功
                    },
                    () => {
                     // 保存失败
                    });
                }, () => {
                  // 保存失败
                });
              }, () => {
                 // 保存失败
              });
            });
        
        },
    },
};
</script>