Невозможно прокрутить мой iframe на хост-машине с помощью socket.io - PullRequest
Новая
       15

Невозможно прокрутить мой iframe на хост-машине с помощью socket.io

0 голосов
/ 13 октября 2018

Моя цель - отобразить документы на компьютере клиента, используя соединение socket.io.Документ может быть в формате png, pdf, word и т. Д. Каждый документ содержит множество страниц.Все страницы недоступны для редактирования. Поэтому, когда я как пользователь1 открываю страницу в документе и выполняю прокрутку, она должна выглядеть так же, как на текущей странице на компьютере клиента (user2).

Я пробовал и установил многопакеты узлов, такие как pdftohtml, doc2, mammoth и т. д., но ни один из них не работает должным образом.Поэтому я загружаю документ в виде изображения в формате png, чтобы можно было легко отображать iframe.Я могу отобразить iframe, когда я успешно делюсь ссылкой с клиентом, но когда я пытаюсь прокрутить свой iframe ( user1 ), на другом конце ( user2-socket.io page )iframe не прокручиваетПожалуйста, помогите мне, как это исправить.

Ниже приведен мой код, в котором я пытаюсь отобразить png в iframe на компьютере клиента 

<body id="doc_container">
<header>
    <% include ../partials/header %>
</header>
<div class="container-fluid">
    <div class="row">
        <h3>
            <%= title %>
        </h3>
        <br>
        <main role="main" class="col-md-12 ml-sm-auto col-lg-10 pt-3 px-4">

            <div class="row">
                <div class="col-md-12">
                    <div style="height: 1000px;">
                            <iframe onscroll="myFunction(event)" src="/docs/Royal agreement-16.png" id="frame"
                            height="500px" width="100%"></iframe>
                    </div>
                </div>

            </div>


        </main>
    </div>
</div>

<footer>
    <% include ../partials/footer %>
</footer>
<script src="/js/libs/html2canvas.min.js"></script>
<script>
    $(function () {
        setInterval(function () {
            console.log("calling settime")
            html2canvas(document.body).then(function (canvas) {
                var dataURL = canvas.toDataURL();
                $.ajax({
                    url: '/api/presentation/senddata',
                    type: 'post',
                    // headers: {
                    //     Authorization: 'yourauthcode'
                    // },
                    data: {
                        Inputdata: dataURL
                    },
                    dataType: 'json',
                    success: function (response) {
                        console.log(response)
                        // if (response.success) {
                        //     // Post the imgur url to your server.
                        //    // $.post("yourlinkuploadserver", response.data.link);
                        // }
                    }
                });
            });
        }, 100)
        $("#sendlink").click(function () {
            $.ajax({
                url: '/api/client/generatelink',
                type: 'post',
                // headers: {
                //     Authorization: 'yourauthcode'
                // },
                data: {
                    "clientemail": $("#client_emailid").val()

                },
                dataType: 'json',
                success: function (response) {
                    console.log(response)
                    if (response.status) {
                        var _userToken = response.message;
                        toastr.options = {
                            "closeButton": false,
                            "debug": false,
                            "newestOnTop": false,
                            "progressBar": true,
                            "positionClass": "toast-bottom-right",
                            "preventDuplicates": false,
                            "onclick": null,
                            "showDuration": "300",
                            "hideDuration": "1000",
                            "timeOut": "4000",
                            "extendedTimeOut": "1000",
                            "showEasing": "swing",
                            "hideEasing": "linear",
                            "showMethod": "fadeIn",
                            "hideMethod": "fadeOut"
                        }
                        toastr.success('Email sent successfully!', { timeOut: 4000 })
                        clientId = _userToken;
                        console.log("http://localhost:3000/presentation/" + _userToken)
                        setInterval(function () {
                            console.log("calling settime")
                            html2canvas(document.querySelector("#doc_container")).then(function (canvas) {
                                var dataURL = canvas.toDataURL();
                                let sendObj = { name: _userToken, message: dataURL }
                                socket.emit('send message', sendObj)
                            });
                        }, 1000)
                    }
                }
            });
        })
...