一咏瑟、問(wèn)題
- 使用
html-docx-js-typescript將富文本導(dǎo)出為word文檔時(shí)拂到，通過(guò)style設(shè)置的<img>圖片寬高不會(huì)生效，圖片仍顯示為原圖大小码泞。 - 查詢后得知兄旬，只能通過(guò)
<img>的原生屬性width和height來(lái)設(shè)置圖片的寬高。 - 經(jīng)試驗(yàn)，當(dāng)單獨(dú)設(shè)置圖片
width和height其中一個(gè)屬性時(shí)领铐，另一個(gè)屬性不會(huì)按比例縮放悯森，而是仍保持原大小。
二绪撵、背景
最近有個(gè)需求瓢姻，將項(xiàng)目中原來(lái)的
將富文本導(dǎo)出為pdf的功能改為將富文本導(dǎo)出為word，本以為只是換一個(gè)插件導(dǎo)出即可的小事情音诈，結(jié)果在實(shí)踐的時(shí)候發(fā)現(xiàn)導(dǎo)出pdf與導(dǎo)出word竟還有些許不同之處幻碱，就比如本文的問(wèn)題：在導(dǎo)出pdf時(shí)，我們可以通過(guò)style來(lái)設(shè)置圖片的大小细溅，這與我們?cè)诟晃谋揪庉嬈髦兴?jiàn)的相同褥傍；然而到了導(dǎo)出word的時(shí)候，就會(huì)發(fā)現(xiàn)這些樣式完全不生效喇聊，導(dǎo)出的圖片大大小小恍风，有些甚至因?yàn)閳D片過(guò)大而超出了word編輯器的界限，為了使導(dǎo)出的word文檔看起來(lái)令人舒適/方便查看誓篱，那么圖片大小一定要相對(duì)統(tǒng)一（這邊要求讓所有圖片的寬度保持一致）朋贬。
三、解決方法
- 根據(jù)以上問(wèn)題描述燕鸽，我們可以發(fā)現(xiàn)兄世，此
問(wèn)題的根源就在于如何獲取圖片的寬高比例，從而動(dòng)態(tài)地設(shè)置圖片的width與height屬性啊研。 - 可以通過(guò)使用HTML中的
Image對(duì)象加載圖片御滩，然后讀取其來(lái)獲取圖片的寬高屬性：
function getImageSize(url) {
return new Promise(function(resolve, reject) {
const image = new Image()
image.src = url
image.onload = function() {
resolve({
width: image.width, // 圖片原寬度
height: image.height, // 圖片原高度
scale: image.height / image.width, // 圖片高度與寬度之比
scaleWidth: 300, // 設(shè)置的縮放后的寬度為300，可根據(jù)實(shí)際需求調(diào)整
scaleHeight: (image.height / image.width) * 300, // 計(jì)算縮放后的高度
src: url // 圖片url
})
}
image.onerror = function() {
reject(new Error('error'))
}
})
}
- 那么我們要在富文本模板中設(shè)置
src為url的圖片img的大小党远，則：
const size = await getImageSize(url)
const imgHtml = `<img src="${url}" width="${size.scaleWidth}" height="${size.scaleHeight}" />`
- 若是一個(gè)圖片列表
imgList削解，則：
const imgsPromise = imgList.map(async url => {
const size = await getImageSize(url)
return `<img src="${url}" width="${size.scaleWidth}" height="${size.scaleHeight}" />`
})
const imgs = await Promise.all(imgsPromise )
- 由于通過(guò)
getImageSize()方法返回的是一個(gè)Promise，因此沟娱，如果我們通過(guò)一個(gè)方法返回富文本內(nèi)容時(shí)氛驮，需要：
// 原
export function getHtml() {
const imgHtml = <img src="xxxxxx"/>
return `
……// 內(nèi)容
${imgHtml}
……// 內(nèi)容
`
}
// 改后
export async function getHtml() {
const size = await getImageSize(url)
const imgHtml = `<img src="${url}" width="${size.scaleWidth}" height="${size.scaleHeight}" />`
return `
……// 內(nèi)容
${imgHtml}
……// 內(nèi)容
`
}
- 在使用時(shí):
// 原
const html = getHtml()
// 改后
const html = await getHtml()
