jsエクスポートワードの詳細
4450 ワード
まず全体の考えを理解します.
1、エクスポートdomノードを作成する
2、ページは直接エクスポートできません.スタイルは行の中のスタイルだけをサポートしますので、手動でdomノードを書き出さなければなりません.
3、echarグラフがあれば、まず静止画に変えて、el表は先に行の中の表に変えます.
4、画像サイズの変換
コアコードをエクスポート
1、エクスポートdomノードを作成する
2、ページは直接エクスポートできません.スタイルは行の中のスタイルだけをサポートしますので、手動でdomノードを書き出さなければなりません.
3、echarグラフがあれば、まず静止画に変えて、el表は先に行の中の表に変えます.
4、画像サイズの変換
dom
内庫file-saverのダウンロードが必要です.インストールすればいいです.コアコードをエクスポート
function exportWord(dom: Node, fileName: string, imgMinwidth?: number) {
imgMinwidth = imgMinwidth ? imgMinwidth : 1024;
setTimeout(() => {
const randomStr = Math.random()
.toString(36)
.slice(-8)
.toUpperCase();
const header = {
top: `MIME-Version: 1.0
Content-Type: multipart/related; boundary="----=_NextPart_01D59F91.${randomStr}"
------=_NextPart_01D59F91.${randomStr}
Content-Location: ${randomStr}.htm
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="utf-8"
`,
head: `
`, body: `
_body_
`
};
// Clone selected element before manipulating it
const images = Array();
const img = dom.find('img');
for (let i = 0; i < img.length; i++) {
// Calculate dimensions of output image
let w = Math.min(img[i].width, imgMinwidth);
let h = img[i].height * (w / img[i].width);
// Create canvas for converting image to data URL
const ramssP = Math.random()
.toString(36)
.slice(-8)
.toUpperCase();
// Save encoded image to array
const uri = $(img[i]).attr('src');
var canvas = document.createElement('CANVAS');
canvas.width = w;
canvas.height = h;
// Draw image to canvas
var context = canvas.getContext('2d');
context.drawImage(img[i], 0, 0, w, h);
// Get data URL encoding of image
var dataUrl = canvas.toDataURL('image/png/jpg');
images[i] = {
type: uri.substring(uri.indexOf(':') + 1, uri.indexOf(';')),
encoding: 'base64',
location: ramssP + '.png',
data: dataUrl.substring(dataUrl.indexOf(',') + 1)
};
// $(img[i]).attr('src', '' + ramssP + '.png'); //
$(img[i]).attr('src', dataUrl);
}
let mhtmlBottom = '
';
for (var i = 0; i < images.length; i++) {
mhtmlBottom += `------=_NextPart_01D59F91.${randomStr}
`;
mhtmlBottom += 'Content-Location: ' + images[i].location + '
';
mhtmlBottom += 'Content-Type: ' + images[i].type + '
';
mhtmlBottom +=
'Content-Transfer-Encoding: ' + images[i].encoding + '
';
mhtmlBottom += images[i].data + '
';
}
mhtmlBottom += `------=_NextPart_01D59F91.${randomStr}--`;
const jdoc = dom
.html()
.replace(/data-v-([\w|\d]+)=""/g, '')
.replace(/rowspan=/g, 'rowspan=3D')
.replace(/colspan=/g, 'colspan=3D')
.replace(/style=/g, 'style=3D')
.replace(/src=/g, 'src=3D')
.replace(/href=/g, 'href=3D')
.replace(/height=/g, 'height=3D')
.replace(/width=/g, 'width=3D')
.replace(/name=/g, 'name=3D');
const sourceHTML =
header.top +
header.head +
header.body.replace('_body_', jdoc) +
mhtmlBottom;
const blob = new Blob([sourceHTML], {
type: 'application/vnd.ms-word;charset=utf-8'
});
saveAs(blob, fileName);
}, 200);
}
えっと、これだけです.