一. 使用html2canvas

安装html2canvas
npm install --save html2canvas
引入html2canvas
```
import html2canvas from "html2canvas";
```

使用引入html2canvas开始截屏并下载

screen() {//对指定容器进行截屏html2canvas(document.getElementById("view"), {useCORS: true, //是否尝试使用CORS从服务器加载图像backgroundColor: '#ececec', //画布背景色（如果未在DOM中指定）。设置null为透明}).then((canvas) => {// 返回一个 canvas 对象，在dom中渲染 canvas 对象//document.body.appendChild(canvas);// 转化成 dataurLlet canvasImg = canvas.toDataURL("image/png");//调用下载方法this.downLoadFile("simple", canvasImg);});
},
downLoadFile(fileName, canvasImg) {//创建一个a标签var a = document.createElement("a");//指定下载文件名称a.href = canvasImg;a.download = fileName;//模拟点击a.click();
},

二. 一个使用html2canvas截屏并下载的实例

<template><div><div id="view"><p>这是一个容器</p><p>对我开始截屏</p></div><button @click="screen">开始截屏</button></div>
</template><script>
/**1.安装html2canvas */
//npm install --save html2canvas
/**2.引入html2canvas */
import html2canvas from "html2canvas";
export default {data() {return {};},methods: {/**3.使用引入html2canvas开始截屏 */screen() {//对指定容器进行截屏html2canvas(document.getElementById("view"), {useCORS: true, //是否尝试使用CORS从服务器加载图像backgroundColor: '#ececec', //画布背景色（如果未在DOM中指定）。设置null为透明}).then((canvas) => {// 返回一个 canvas 对象，在dom中渲染 canvas 对象//document.body.appendChild(canvas);// 转化成 dataurLlet canvasImg = canvas.toDataURL("image/png");//调用下载方法this.downLoadFile("simple", canvasImg);});},downLoadFile(fileName, canvasImg) {//创建一个a标签var a = document.createElement("a");//指定下载文件名称a.href = canvasImg;a.download = fileName;//模拟点击a.click();},},
};
</script><style scoped>
</style>

Vue - 截图并下载到本地（html2canvas）相关推荐

将vue文档下载到本地预览
将vue文档下载到本地预览由于vue文档在服务器在国外,因此访问速度较慢,为了方便文档查看,可以将文档下载到本地预览步骤到vue的GitHub仓库下载文档源码下载node.js和git安装到本 ...
vue将qrcodejs生成的二维码下载到本地
vue将qrcodejs生成的二维码下载到本地 dom结构如下 <div class="qr-code "id="qr-code"></div ...
(vue) 前端实现下载本地Excel模板
(vue) 前端实现下载本地Excel模板方法: 第一步: 将文件放在public里第二步: href链接解决参考:https://blog.csdn.net/sincejuly1995/art ...
vue项目使用iconfont（本地下载、彩色icon）
一.vue-element-admin项目使用iconfont(页面+菜单) 1.iconfont下载资源到本地 2.将下好的文件取这5个放在项目assets文件夹里 3.查看iconfont.css ...
Vue中实现图片下载到本地功能和导出（下载）excel文件功能：
一.实现图片下载到本地功能需求: 将勾选的列表项的id传给后台,让后台处理并下载对应的图片 1. 后台接口: 下载图片zip: GET /download 请求数据类型 application/x- ...
基于vue.js的饿了么的element-ui的unpkg文件的下载到本地
现在vue.js使用很广泛,饿了么的element-ui基于vue.js开发的ui框架.官方提供了unpkg的访问地址https://unpkg.com/element-ui@2.4.6/.可以直接在 ...
4.Vue项目中下载本地pd、word、excel文件
记录:Vue项目中下载本地pdf.word.excel文件今日的一个需求是下载导入模板文件,该模板文件不是接口请求获取,而是本地的文件该文章属转载:Vue下载本地pdf.word.excel文件 ...
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
1.进入官方网站:iconfont-阿里巴巴矢量图标库 2.在搜索框搜索想要使用的图标,选择心仪的图标后点击添加购物车,可以选择多个. 3.选择完成后点击右上角购物车,弹出页面后点击添加至项目,选择项 ...
前端vue项目-关于下载文件pdf/excel
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了看过了很多方法,做个整理吧哈哈哈哈参考的文章链接: https://www.cnblogs.com/jiangweic ...

Vue - 截图并下载到本地（html2canvas）

截图并下载到本地（html2canvas）

一. 使用html2canvas

二. 一个使用html2canvas截屏并下载的实例

Vue - 截图并下载到本地（html2canvas）相关推荐

最新文章

热门文章