I'm using laravel 9, vue 3 and phpoffice/phpword. I've also uploaded a word document which lives in my storage folder and that word document has stylings in it.
What I'm trying to do is display that word document in my vue page so that you can see it. So far I've only managed for the text to be displayed, but not any of the stylings.
Here is my FileService class
public function scanDocxFile(File $file)
{
$file_path = $file->file_path . '/' . $file->filename;
$phpWord = IOFactory::load($file_path);
$htmlWriter = IOFactory::createWriter($phpWord, 'HTML');
$htmlContent = '';
ob_start();
$htmlWriter->save('php://output');
$htmlContent = ob_get_contents();
ob_end_clean();
return $htmlContent;
}
This is my FileController
public function getFile(File $file)
{
$file = fileService()->getSingleFile($file);
return view('work.single-file', [
'file' => $file
]);
}
My blade file
@extends('adminlte::page')
@section('content')
<div id="work-app">
<single-file :file="{{ json_encode($file) }}"></single-file>
</div>
@endsection
and my vue file
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
{{ file }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['file'],
components: {},
data(){
return {}
},
computed: {
},
methods: {
},
mounted() {
console.log('Single File Component mounted.')
}
}
</script>
<style scoped>
</style>
