html2canvas有些样式不支持，比如 writing-mode、border-image、filter、object-fit等，可以用dom-to-image代替处理。

花花鱼

于 2024-11-30 20:02:08 发布

阅读量662

点赞数 8

分类专栏： Vue3 文章标签：前端

本文链接：https://blog.youkuaiyun.com/jwbabc/article/details/144159741

版权

Vue3 专栏收录该内容

140 篇文章

订阅专栏

1、往往我们要写如下的界面：

以上图片，截图于CSS Writing Modes - html2canvas - JSFiddle - JSFiddle - JSFiddle - Code Playground

那么这里可以用二种方式来实现垂直文本：

1）writing-mode，这种方式html2canvas不支持。

2）transform: rotate(90deg);这种测试下来也不支持。

2、那总归要处理的，用新库：dom-to-image代替处理。

这个就是处理以后的结果，效果还行。

3、用法：

pnpm add dom-to-image

import domToImage from 'dom-to-image';

domToImage
      .toPng(document.getElementById('domid'))
      .then(function (dataUrl) {
        var link = document.createElement('a');
        link.href = dataUrl;
        // 设置下载的文件名
        link.download = 'screenshot.png';
        // 触发点击
        link.click();
      })
      .catch(function (error) {
        console.error(error);
      });