移动端将dom元素生成图片下载

移动端将dom元素生成图片下载

使用了html2canvas + a标签
PC完全没问题能下载图片

const cloneDom: any = document.getElementById('pdfDom').cloneNode(true)
	document.getElementsByTagName('body')[0].appendChild(cloneDom)
	html2Canvas(cloneDom, { allowTaint: false }).then((canvas: any) => {
		const contentWidth = canvas.width
		const contentHeight = canvas.height
		// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
		const pageHeight = (contentWidth / 592.28) * 841.89
		const leftHeight = contentHeight
		const position = 0
		const imgWidth = 595.28
		const imgHeight = (592.28 / contentWidth) * contentHeight
		const pageData = canvas.toDataURL('image/jpeg', 1.0)

		// 将Canvas转为Blob
		// canvas.toBlob((blob: any) => {
		// 	// 创建下载URL
		// 	const url = URL.createObjectURL(blob)
		// 	const a = document.createElement('a')
		// 	a.href = url
		// 	a.download = '园区通行码.jpg'
		// 	a.setAttribute('webkitdirectory', '') // iOS特有的属性，允许直接保存到相册而不是下载到文件管理器中某些目录下。注意：这可能在未来的Safari版本中不再支持。
		// 	a.click()
		// 	// 清理
		// 	setTimeout(() => {
		// 		URL.revokeObjectURL(url)
		// 	}, 100)
		// }, 'image/jpeg')
		const a = document.createElement('a')
		a.href = pageData
		a.download = '园区通行码'
		a.setAttribute('webkitdirectory', '')
		document.body.appendChild(a)
		a.click()
		document.body.removeChild(a)
	})

问题
移动端没法下载图片，
1.微信是直接打开图片，
2.ios各种浏览器能下载图片但是未下载到相册
3.安卓也没法下载

因为有各种权限问题 在移动端（特别是iOS和Android），保存文件到相册通常需要用户明确授权

解决：

生成图片 让用户自己长安保存，pc可直接下载