<> The last one said that excel Preview of file , actually word Preview with excel The preview is very similar , Code is not bad , get down to business
* word Preview also uses plug-ins , It's used here mammoth plug-in unit , first vue Project introduction ：
npm install mammoth
Import on preview page
import mammoth from ‘mammoth’
* It also refers to gesture zooming and moving , It's up to me. pdf Preview the article with instructions for gesture operation , Used AlloyFinger Gesture plugin .
html code <template> <div class="excel-container"> <van-nav-bar left-text=" return "
title="word see " left-arrow :fixed="true" :placeholder="true" @click-left="back"
/> <div ref="docPreview"></div> </div> </template>
js code
* alike , Test locally , hold word The file is in the static Under the folder , And then url Change the address to you static Path under folder . <script> import
mammothfrom 'mammoth' import AlloyFinger from
"../../../static/js/alloyfinger.js"; import transform from
"../../../static/js/transform.js"; import To from "../../../static/js/to.js";
export default { data () { return { id: '', url:"",// excel File address goPath: '',
// Interface to go } }, beforeRouteEnter (to, from, next) { // Which page does the monitor come from let path = from.
fullPath; next(vm => vm.setPath(path)); }, created(){ this.getParams() },
mounted () { this.previewFile(); this.getData(); }, methods: { setPath(path) {
this.goPath = path.split("/")[1]; }, // Return key back() { this.$router.push({ name:
this.goPath, params: { id: this.id } }) }, getParams() { // Get the parameters brought by the route let
routerParams= this.$route.params.id // Put the data in the data of the current component this.id = routerParams this
.url = this.$route.params.url }, previewFile() { let _this=this; try { var xhr =
new XMLHttpRequest(); xhr.open("GET", this.url); xhr.responseType =
"arraybuffer"; xhr.onload = function(e) { var arrayBuffer = xhr.response;
//arrayBuffer mammoth .convertToHtml({ arrayBuffer: arrayBuffer }) .then(
displayResult) .done(); function displayResult(result) { _this.$refs.docPreview.
innerHTML= result.value || ""; } }; xhr.send(); } catch (e) { console.log(e);
_this.$emit("errorPreview"); } }, getData() { let that = this; let element =
that.$refs.docPreview; Transform(element); var initScale = 1; this.af = new
AlloyFinger(element, { // rotate: function (evt) { // Achieve rotation // element.rotateZ +=
evt.angle; // }, multipointStart: function () { initScale = element.scaleX; },
pinch: function (evt) { // Achieve scaling element.scaleX = element.scaleY = initScale * evt
.zoom; }, pressMove: function (evt) { // Make it mobile element.translateX += evt.deltaX;
element.translateY += evt.deltaY; evt.preventDefault(); }, }); }, } } </script>
Technology