こんにちは！CastingONEの大沼です。
はじめに
弊社ではVue.jsでHTMLメールを作成する画面を作っていますが、プレビューで表示しているコンポーネントをそのままHTMLメールとして使えないかと検討しました。マウント時に出力されるHTMLを取得すれば実現できそうなので、その方法についてまとめました。
Vue.jsから出力されるHTMLを抽出する方法
Vue.jsでは特定のDOMに対してマウントすることが可能で、仮のdivタグを用意してそこにマウントすることで、特定のコンポーネントのHTML内容を取得することができます。具体的にコードに落とすと以下のようになります。scoped CSSの場合は data-xxxx のようなdata属性が付与されて、HTMLとして抽出する際は不要でしたので取り除く処理も入れています。
Vueコンポーネントをマウントした際のHTMLテキストを取得する
/**
* Vueコンポーネントをマウントした際のHTMLテキストを取得する
* @param vueComponent - Vueコンポーネント
* @param props - propsデータ
*/
const getSerializedHtmlByVue = (vueComponent: VueConstructor, props: any) => {
const elRoot = document.createElement('div')
const vm = new Vue({
render(h) {
return h(vueComponent, { props })
},
})
vm.$mount(elRoot)
const html = vm.$el.innerHTML
// Vue.jsにあるdata-v-1234のようなデータは不要なので取り除く
const omittedHtml = html.replace(/ data-v-[0-9a-f]+=""/g, '')
vm.$destroy()
elRoot.remove()
return omittedHtml
}
おわりに
以上がVue.jsから出力されるHTMLを抽出する方法でした。マウントした結果のHTMLを取得されたい方はぜひご参考ください。
弊社ではいっしょに働いてくれるエンジニアを募集中です。社員でもフリーランスでも、フルタイムでも短時間の副業でも大歓迎なので、気軽にご連絡ください！
Discussion